一般情況下引用字體@font-face時,會把woff,eot,svg都引用進去,瀏覽器根據需要下載不同類型的字體。
IE–.eot; 其它瀏覽器–.woff; 手機瀏覽器一般是–.ttf;
truetype:
是windows和mac系統最常用的字體格式。
eot:
eot是嵌入式字體,是微軟開發的技術,允許onetype字體用@font-face嵌入到網頁。
onetype:
onetype是微軟和Adobe共同開發的字體,IE瀏覽器全部採用這種字體。
woff:
woff(web開發字體格式)是一種專門為web而設計的字體格式標準,實際上是對truetype/onetype等字體格式的封裝,每個字體文件中含有字體以及針對字體的元數據(Metadata),字體文件被壓縮,以便於網絡傳輸。
svg:
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現字體,還有一種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 可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。
注意了,“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風格,簡潔現代的線條,非常受到追捧。在Mac下面被認為是最佳的網頁字體,在Windows下由於Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,細節上比如R和G有小小差別。如果字號太小,文字太多,看起來會有些累眼。Win和Mac顯示都正常。
中文:
宋體:Win最常見的字體,小字體點陣,大字體TrueType,但是大字體並不好看,所以最好別做標題。
微軟雅黑:Vista之後新引入的字體,打開Cleartype之後顯示效果不錯,不開Cleartype發虛。
華文細黑:Mac下的默認中文。
字體引用的優先級
ios:中文:PingFang 蘋方,STHeitiSC-Light 蘋果黑體;英文:優先Gotham,Myriad Set Pro;STHeitiSC-Light 蘋果黑體;
windows:yahei 微軟雅黑
font-family:’PingFang SC’,’Gotham’,’Myriad Set Pro’ ,’STHeitiSC-Light’, ‘Microsoft YaHei’, sans-serifsans-serif;