css中如何解決引入指定字體@font-face兼容各瀏覽器的問題

這篇文章將為大家詳細講解有關css中如何解決引入指定字體@font-face兼容各瀏覽器的問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

注意：

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

常規用法：

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

h2 {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 表示網址（url路徑的字體，網頁加載時，會自動在服務器上下載字體，因此如果字體文件太大，網頁加載會比較慢）

如代碼

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

注意：

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

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

關于“css中如何解決引入指定字體@font-face兼容各瀏覽器的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。