一般情況下引用字體@font-face時，會把woff，eot，svg都引用進去，瀏覽器根據需要下載不同類型的字體。

IE--.eot;?? ?其它瀏覽器--.woff； ? ?手機瀏覽器一般是--.ttf;

truetype:
是windows和mac系統(tǒng)最常用的字體格式。

eot:
eot是嵌入式字體，是微軟開發(fā)的技術，允許onetype字體用@font-face嵌入到網頁。

onetype:
onetype是微軟和Adobe共同開發(fā)的字體，IE瀏覽器全部采用這種字體。

woff:
woff(web開發(fā)字體格式)是一種專門為web而設計的字體格式標準，實際上是對truetype/onetype等字體格式的封裝，每個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便于網絡傳輸。

svg:
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現(xiàn)字體，還有一種gzip壓縮格式的SVG字體。

如何使用：

IE只支持微軟自有的EOT格式字體，需要用字體轉換工具將其轉換為EOT格式，其他瀏覽器都不支持這一字體格式，其它瀏覽器可以設置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體。

<span class="logo"></span>

@font-face {font-family: 'MyWebFont';src: url('webfont.eot'); /* IE9 Compat Modes */src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('webfont.woff2') format('woff2'), /* Super Modern Browsers */url('webfont.woff') format('woff'), /* Pretty Modern Browsers */url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }#logo{font-family:'MyWebFont', 'PingFang SC', 'Helvetica Neue','Helvetica', 'STHeitiSC-Light',"Microsoft YaHei", 'Arial', sans-serif;font-size: 60px; }

font-family 可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。
注意了，“sans-serif”不是某個字體的名稱，而是一種在前面敘述的字體都無效時而最終選用的字體，稱為瀏覽器通用字體，它取決于你所用的瀏覽器默認的通用字體是什么，可能是“Arial”，也有可能是“Helvetica”。
并始終提供一個類族名稱作為最后的選擇。

通常字體系列名稱：比如："serif"(無襯線)、"sans-serif"(襯線)、"cursive"(等寬)、"fantasy"(夢幻)、"monospace"(草體)；

具體DEMO案例，這篇文章比較全。http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html

注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。

網頁常用的字體：
Helvetica: 被評為設計師最愛的字體，Realist風格，簡潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字體，在Windows下由于Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細節(jié)上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常。

中文：
宋體：Win最常見的字體，小字體點陣，大字體TrueType，但是大字體并不好看，所以最好別做標題。
微軟雅黑：Vista之后新引入的字體，打開Cleartype之后顯示效果不錯，不開Cleartype發(fā)虛。
華文細黑：Mac下的默認中文。

字體引用的優(yōu)先級

ios：中文：PingFang 蘋方，STHeitiSC-Light 蘋果黑體；英文：優(yōu)先Gotham,Myriad Set Pro;STHeitiSC-Light 蘋果黑體；

windows：yahei 微軟雅黑

font-family:'PingFang SC','Gotham','Myriad Set Pro' ,'STHeitiSC-Light', 'Microsoft YaHei', sans-serifsans-serif;

總結

以上是生活随笔為你收集整理的关于web中的字体, .woff, .eot, .svg的全部內容，希望文章能夠幫你解決所遇到的問題。

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