整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網(wǎng)頁顯示效果會(huì)大打折扣。
為了解決這個(gè)問題，CSS 引入 web 字體，允許瀏覽器從服務(wù)器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀(jì) 80 年代末開發(fā)的字體標(biāo)準(zhǔn)。它是 macOS 和 Windows 操作系統(tǒng)使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計(jì)算機(jī)字體格式。它建立在 TrueType 基礎(chǔ)上，是微軟的注冊(cè)商標(biāo)。OpenType 字體目前在主要的計(jì)算機(jī)平臺(tái)上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網(wǎng)頁的字體格式，2009 年開發(fā)，如今是 W3C（萬維網(wǎng)聯(lián)盟）的推薦標(biāo)準(zhǔn)。WOFF 本質(zhì)是 OpenType 或 TrueType 字體，但是經(jīng)過壓縮并附加額外的元數(shù)據(jù)。在帶寬受限的網(wǎng)絡(luò)中，WOFF 能更好的支持從服務(wù)器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時(shí)的字形。SVG 1.1 規(guī)范定義了一個(gè)字體規(guī)范，允許在 SVG 文檔中創(chuàng)建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設(shè)計(jì)的一種用于網(wǎng)頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數(shù)據(jù)來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務(wù)器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費(fèi)商用的中文字體。下載字體文件后，放到和 index.html 同級(jí)的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內(nèi)，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。
font-family寫法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級(jí)啟嘉班</p>
</body>效果：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
