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

注意：

支持 @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';//定義該字體名稱，后面要使用該字體時，使用該名稱
 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等字體達到更多種瀏覽版本的支持。

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

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

擴展：字體路徑

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

如代碼

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

注意：

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

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

總結

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

最新評論