css 14-CSS3屬性詳解：Web字體

本文轉載自查看原文 2020-12-15 10:33 337

14-CSS3屬性詳解：Web字體

#前言

開發人員可以為自已的網頁指定特殊的字體（將指定字體提前下載到站點中），無需考慮用戶電腦上是否安裝了此特殊字體。從此，把特殊字體處理成圖片的方式便成為了過去。

支持程度比較好，甚至 IE 低版本的瀏覽器也能支持。

#字體的常見格式

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下字體格式的知識。

#TureTpe格式：(.ttf)

.ttf 字體是Windows和Mac的最常見的字體，是一種RAW格式。

支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。

#OpenType格式：(.otf)

.otf 字體被認為是一種原始的字體格式，其內置在TureType的基礎上。

支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。

#Web Open Font Format格式：(.woff)

woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離。

支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。

#Embedded Open Type格式：(.eot)

.eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+。

#SVG格式：(.svg)

.svg字體是基於SVG字體渲染的一種格式。

支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。

總結：

了解了上面的知識后，我們就需要為不同的瀏覽器准備不同格式的字體。通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過於在意字體格式之間的區別。

下載字體的網站推薦：

#WebFont 的使用步驟

打開網站http://iconfont.cn/webfont#!/webfont/index，如下：

上圖中，比如我想要「思源黑體-粗」這個字體，那我就點擊紅框中的「本地下載」。

下載完成后是一個壓縮包，壓縮包鏈接：http://download.csdn.net/download/smyhvae/10253561

解壓后如下：

上圖中，我們把箭頭處的html文件打開，里面告訴了我們 webfont 的使用步驟：

（1）第一步：使用font-face聲明字體

@font-face {font-family: 'webfont'; src: url('webfont.eot'); /* IE9*/ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }

（2）第二步：定義使用webfont的樣式

.web-font{ font-family:"webfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

（3）第三步：為文字加上對應的樣式

<i class="web-font">這一分鍾，你和我在一起，因為你，我會記得那一分鍾。從現在開始，我們就是一分鍾的朋友。這是事實，你改變不了，因為已經完成了。</i>

舉例：

我們按照上圖中的步驟來，引入這個字體。完整版代碼如下：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p{ font-size:30px; } /* 如果要在網頁中使用web字體（用戶電腦上沒有這種字體）*/ /* 第一步：聲明字體*/ /* 告訴瀏覽器 去哪找這個字體*/ @font-face {font-family: 'my-web-font'; src: url('font/webfont.eot'); /* IE9*/ src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/webfont.woff') format('woff'), /* chrome、firefox */ url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ } /* 第二步：定義一個類名，誰加這類名，就會使用 webfont 字體*/ .webfont{ font-family: 'my-web-font'; } </style> </head> <body> <!-- 第三步：引用 webfont 字體 --> <p class="webfont">生命壹號，永不止步</p> </body> </html>

代碼解釋：

（1）my-web-font這個名字是隨便起的，只要保證第一步和第二步中的名字一樣就行。

（2）因為我把字體文件單獨放在了font文件夾中，所以在src中引用字體資源時，寫的路徑是 font/...

工程文件：

2018-02-20-WebFont舉例.zip

#字體圖標（阿里的 iconfont 網站舉例）

我們其實可以把圖片制作成字體。常見的做法是：把網頁中一些小的圖標，借助工具生成一個字體包，然后就可以像使用文字一樣使用圖標了。這樣做的優點是：

將所有圖標打包成字體庫，減少請求；
具有矢量性，可保證清晰度；
使用靈活，便於維護。

也就是說，我們可以把這些圖標當作字體來看待，凡是字體擁有的屬性（字體大小、顏色等），均適用於圖標。

使用步驟如下：（和上一段的使用步驟是一樣的）

打開網站http://iconfont.cn/，找到想要的圖標，加入購物車。然后下載下來：

壓縮包下載之后，解壓，打開里面的demo.html，里面告訴了我們怎樣引用這些圖標。

舉例1：（圖標字體引用）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*申明字體*/ @font-face {font-family: 'iconfont'; src: url('font/iconfont.eot'); /* IE9*/ src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont{ font-family: iconfont; } p{ width: 200px; border: 1px solid #000; line-height: 60px; font-size:30px; margin:100px auto; text-align: center; } p span{ color:red; } </style> </head> <body> <!-- 【重要】編碼代表圖標 --> <p><span class="iconfont">&#xe628;</span>掃碼付款</p> </body> </html>

效果如下：

舉例2：（偽元素的方式使用圖標字體）

如果想要在文字的前面加圖標字體，我們更習慣采用偽元素的方式進行添加。

代碼如下：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*申明字體*/ @font-face {font-family: 'iconfont'; src: url('font/iconfont.eot'); /* IE9*/ src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } p{ width: 200px; border: 1px solid #000; line-height: 60px; font-size:30px; margin:100px auto; text-align: center; position: relative; } .icon::before{ /*&#xe628;*/ content:"\e628"; /*position: absolute;*/ /*left:10px;*/ /*top:0px;*/ font-family: iconfont; color:red; } span{ position: relative; } </style> </head> <body> <p class="icon">掃碼付款</p> <span class="icon" >我是span</span> <div class="icon">divvvvvvvvvvv</div> </body> </html>