整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          css如何引入特殊字體

          前端開發(fā)過程中難免會(huì)用到特殊字體,如何引入特殊字體?

          1. 首先你得有字體文件,文件格式為,TTF、OTF、EOT、SVG
          2. 將字體文件放入本地文件夾中或者服務(wù)器上
          3. css中引入,以下為引入方法
          @font-face {
            font-family: 'icomoon'; // 這里自定義字體名稱 
            src:  url('fonts/icomoon.eot?'); // 文件路徑或者服務(wù)器路徑
            src:  url('fonts/icomoon.eot?') format('embedded-opentype'), // format屬性:字體的格式 主要用于瀏覽器識(shí)別
              url('fonts/icomoon.ttf?') format('truetype'),
              url('fonts/icomoon.woff?') format('woff'),
              url('fonts/icomoon.svg?') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
          }
          
          /* 調(diào)用 */
          body{
              font-family:'icomoon'
          }
          

          注:eot為IE專用,ttf官方說是蘋果和微軟為PostScript 而開發(fā)的字體格式,個(gè)人理解為通用格式。woff是壓縮過后輕量級(jí),svg對(duì)文本支持不太好

          ss怎么引入html

          在HTML中引入CSS的方法主要有四種:

          1. 內(nèi)聯(lián)方式:直接在HTML標(biāo)簽中的style屬性中添加CSS,即采用行內(nèi)樣式。例如:<p style="color:red;">這是紅色文字</p>。這種方式的優(yōu)點(diǎn)是可以直接在HTML文件中看到效果,但缺點(diǎn)是不夠模塊化,不便于復(fù)用和維護(hù)。

          2. 內(nèi)嵌樣式:使用<style>標(biāo)簽在HTML文檔頭部(<head><head>之間)定義CSS樣式。例如:

          <head>

          <style>

          p {

          color: red;

          }

          </style>

          </head>

          <body>

          <p>這是紅色文字</p>

          </body>

          這種方式的優(yōu)點(diǎn)是可以將CSS樣式與HTML內(nèi)容分離,提高代碼可讀性,但同樣存在復(fù)用和維護(hù)的問題。

          3. 鏈接式:使用<link>標(biāo)簽引入外部CSS樣式表文件。具體操作步驟如下:新建一個(gè)HTML文件和一個(gè)CSS文件,將新建的CSS文件保存在一個(gè)文件夾中,回到HTML文件中,在<title><title>下方添加<link>標(biāo)簽并設(shè)置其屬性為CSS文件的路徑,保存后便實(shí)現(xiàn)了引入外部CSS文件。這種方式的優(yōu)點(diǎn)是可以實(shí)現(xiàn)代碼的復(fù)用和維護(hù),但需要提前準(zhǔn)備好CSS文件。

          4. 導(dǎo)入式:使用@import命令導(dǎo)入外部CSS樣式表。例如:<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是,這里的路徑需要是正確的。這種方式可以在同一個(gè)HTML文件中引入多個(gè)CSS文件,但瀏覽器對(duì)@import的支持程度不同,可能會(huì)出現(xiàn)兼容性問題。

          據(jù) 《Adobe 2020年的技術(shù)傳播行業(yè)趨勢調(diào)查》, PDF 格式在內(nèi)容發(fā)布的的格式選擇排名最靠前,緊隨其后的是 HTML5 格式。 受到諸多客戶的需求鼓舞,本文揭示了如何應(yīng)用 CSS 技術(shù)裝扮您的 PDF 和 HTML 格式文檔。


          工作準(zhǔn)備

          1. Oxygen XML Author/Editor 23.1
          2. DITA 源文件 和 DITA Map

          實(shí)施步驟

          1. 新建 CSS 代碼,如下示意:

          /*

          * ==============================================

          * Skin for oXygen generated WebHelp.

          * ==============================================

          */

          /*

          * ------------------------------------------------------------------

          *

          * Fonts.

          *

          */

          @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');


          html, body {

          min-width:100%;

          }


          body{


          font-family: "Noto Sans SC";


          }

          2. 命名 CSS 為 oxygen-font.CSS 后將 CSS 引入發(fā)布流程,方法如下:

          在 Oxygen 編輯器 Editor 或 Author 引入 OPT 配置文件 ,具體內(nèi)容如下

          <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

          <publishing-template>

          <name>SampleCustomer</name>

          <description>demo</description>

          <webhelp>

          <preview-image file="logo.png"/>

          <parameters>

          <parameter name="webhelp.show.main.page.tiles" value="no"/>

          <parameter name="webhelp.show.main.page.toc" value="yes"/>

          <parameter name="webhelp.top.menu.depth" value="3"/>

          <parameter name="args.figurelink.style" value="TITLE"/>

          <parameter name="args.tablelink.style" value="TITLE"/>

          <parameter name="force-unique" value="true"/>

          </parameters>

          <resources>

          <css file="oxygen-font.css"/>

          <css file="notes.css"/>

          <fileset>

          <include name="resources/**/*"/>

          <exclude name="resources/**/*.svn"/>

          <exclude name="resources/**/*.git"/>

          </fileset>

          </resources>

          <online-preview-url>https://www.oxygenxml.com/samples/DITA-WebHelp-Responsive/tree/oxygen-red/</online-preview-url>

          <tags>

          <tag type="layout">tree</tag>

          <tag type="color">red</tag>

          <tag type="color">light</tag>

          </tags>

          </webhelp>

          </publishing-template>


          3. 分別在 Oxygen 編輯器選中上述配置文件后發(fā)布 HTML 和 PDF 格式文檔

          4. 驗(yàn)證字體實(shí)施效果,如下圖示意:

          如果您對(duì) Oxygen 環(huán)境下如何用 CSS 技術(shù)裝扮您的公司產(chǎn)品手冊,業(yè)務(wù)文檔,如 QMS 質(zhì)量管理體系文檔 , SOP 標(biāo)準(zhǔn)操作指南感興趣,請聯(lián)系我們。


          上一篇:一文讀懂 CSS 單位
          下一篇:HTML 腳本
          主站蜘蛛池模板: av在线亚洲欧洲日产一区二区| 亚洲天堂一区二区| 亚洲国产一区国产亚洲| 日韩精品一区二区三区在线观看| 91精品国产一区| 国产乱码精品一区二区三区中文| 国产精品一区二区综合| 久久精品无码一区二区WWW| 一区二区三区国产| 国产成人精品一区二三区在线观看| 成人毛片无码一区二区| 大香伊人久久精品一区二区| 亚洲Av无码一区二区二三区| 人妻AV中文字幕一区二区三区| 精品久久一区二区三区| 国产一区二区三区高清视频| 精品国产一区二区三区AV性色| 麻豆一区二区三区蜜桃免费| 日本精品一区二区三区在线视频| 精品一区二区三区中文| 又紧又大又爽精品一区二区| 风流老熟女一区二区三区| 日本一区二区三区在线网| 一区二区三区国模大胆| 538国产精品一区二区在线| 中文字幕在线一区二区三区| 色妞AV永久一区二区国产AV| 熟女大屁股白浆一区二区| 国产午夜精品免费一区二区三区| 久久精品免费一区二区三区 | 国产精品主播一区二区| 一区二区三区美女视频| 韩国福利一区二区三区高清视频 | 国产精品视频免费一区二区| 无码视频免费一区二三区| 国产一区二区在线观看app| 精品久久国产一区二区三区香蕉| 亚洲性日韩精品国产一区二区| 日韩精品一区二区三区在线观看| 亚洲第一区精品日韩在线播放| 无人码一区二区三区视频|