網(wǎng)頁(yè)制作中，如果想使用特定的字體可以通過 @font-face 引用，即是解決訪問用戶電腦本地沒有安裝該字體導(dǎo)致不能按設(shè)計(jì)樣式顯示的問題。

注意：

支持 @font-face 的瀏覽器有Internet Explorer 9、Firefox Opera、Chrome和Safari，另外IE9只支持.eot類型的字體，F(xiàn)irefox、Chrome、Safari、和Opera支持.ttf、.otf 兩種類型字體。

常規(guī)用法：

@font-face {
 font-family: 'myFirstFont';//定義該字體名稱，后面要使用該字體時(shí)，使用該名稱
 src: url('YourWebFontName.ttf'),
  url('YourWebFontName.eot'); /* IE9 */
} 

h1 {font-family:'myFirstFont';}

兼容性寫法

@font-face {
 font-family: 'myFirstFont';
 src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
 src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

不同的瀏覽器支持的字體格式不同，以目前主流瀏覽器為參考，使用 @font-face 至少需要.woff、.eot、.SVG三種格式字體，甚至還需要.svg等字體達(dá)到更多種瀏覽版本的支持。

.TTF、.OTF - 適用于Firefox 3.5、Safari、Opera；
.EOT - 適用于Internet Explorer 4.0+；
.SVG - 適用于Chrome、IPhone

獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

擴(kuò)展：字體路徑

local 表示本機(jī)地址， url 表示網(wǎng)址（url路徑的字體，網(wǎng)頁(yè)加載時(shí)，會(huì)自動(dòng)在服務(wù)器上下載字體，因此如果字體文件太大，網(wǎng)頁(yè)加載會(huì)比較慢）

如代碼

@font-face {
　　font-family: 'myFirstFont';
　　src: url('YourWebFontName.eot')，local('YourFontName.eot');
}

注意：

如果在src上定義了多種字體，是按順序的候選關(guān)系，如果修改了定義的字體或順序，需要重新打開瀏覽器才能看到修改后的效果，刷新是無效的。

在 @font-face 中 font-family 的作用是聲明字體變量，與普通選擇器中的 font-family 是不一樣的。

總結(jié)

到此這篇關(guān)于css中引入指定字體@font-face兼容各瀏覽器的問題的文章就介紹到這了,更多相關(guān)css 字體 @font-face內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論