整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前端開發(fā)過程中難免會(huì)用到特殊字體，如何引入特殊字體？
@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 格式文檔。
/*
* ==============================================
* 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)系我們。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
