@font-face

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

.TTF或.OTF，適用于Firefox?3.5、Safari、Opera?

.EOT，適用于Internet?Explorer?4.0+?

.SVG，適用于Chrome、AndRoid、IPhone

.woff，適用于Chrome 6，Firefox3，ie9+，opare11。

woff是最新的web開放字體格式(web open font format)，w3c推薦，主要優勢是針對瀏覽器進行優化，字體文件小。

下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們在手頭上（或在設計資源站點已經找到）有該字體的某種格式文件，最常見的是.TTF?文件，我們需要通過這種文件格式轉換為其余兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或?onlinefontconverter提供的在線字體轉換服務獲取。這里推薦第一個站點，它允許我們選擇需要的字符生成字體文件（在服務的最后一個選項），這樣就大大縮減了字體文件的大小，使得本方案更具實用性。

然后
獲取到三種格式的字體文件后，下一步要在樣式表中聲明該字體，并在需要的地方使用該字體。?
字體聲明如下：

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

例如：

@font-face { font-family: 'fontNameRegular'; src: url('華康少女文字.eot'); src: local('華康少女文字 Regular'), local('華康少女文字'), url('華康少女文字.woff') format('woff'), url('華康少女文字.ttf') format('truetype'), url('華康少女文字.svg#華康少女文字') format('svg'); } body{background-color:#D2CDBE;font-family: "華康少女文字","宋體",sans-serif; }

總結

以上是生活随笔為你收集整理的css网络字体@font-face的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。