XP時(shí)，中文網(wǎng)頁(yè)默認(rèn)宋體；IE7/8時(shí)，改成了微軟雅黑；到現(xiàn)代瀏覽器，CSS3提供了@font-face讓我們終于擺脫了使用固有字體的痛苦！
一、@font-face不足及解決方式
缺點(diǎn)：兼容性不夠好，中文字體文件過大(影響性能)，版權(quán)問題，只有woff格式字體支持跨瀏覽器。
解決方法：書寫專門的兼容代碼，用到的字可以選擇抽出（gulp有插件gulp-font-spider處理），使用現(xiàn)代瀏覽器解決不統(tǒng)一問題。
二、使用方法（2步）
①?字體引入及取名
@font-face{
? ?font-family:'MyFont';
? ?src:url('abfont.eot');? /* IE9 */
? ?src:url('afont.eot?#iefix') format('embedded-opentype'),? ?/* IE6-IE8 */
? ?url('afont.woff') format('woff'),? ?/*?現(xiàn)代瀏覽器 */
? url('abfont.ttf') format('truetype'),? /* Safari, Android, iOS */
? url('afont.svg#svgFontName') format('svg');? /*?老版 iOS，其實(shí)svg最新版的5大瀏覽器也是支持的 */
}
如果你使用的是現(xiàn)代瀏覽器IE9+及其他四大主流新版瀏覽器，你可以簡(jiǎn)化為：
@font-face{
? ? font-family:'MyFont';
? ? src:url('afont.woff') format('woff'),? /*?現(xiàn)代瀏覽器 */
}
②使用①的字體
body{
? ? font-family:'MyFont';
? ? font-size: 18px;
}
三、字體及兼容性介紹
①TTF---TrueType（.ttf）
Windows和Mac系統(tǒng)最常用的字體格式，其最大的特點(diǎn)就是它是由一種數(shù)學(xué)模式來進(jìn)行定義的基于輪廓技術(shù)的字體，這使得它們比基于矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時(shí)，這類字體和矢量字體一樣可以隨意縮放、旋轉(zhuǎn)而不必?fù)?dān)心會(huì)出現(xiàn)鋸齒。
②OTF---OpenType (.otf)
OpenType是微軟和Adobe共同開發(fā)的字體，微軟的IE瀏覽器全部采用這種字體，致力于替代TrueType字體。
②WOFF---WebOpen Font Format (.woff)
Web Open Font Format的縮寫，加載速度比其他字體快(使用OpenType (OTF)和TrueType (TTF)字體里的存儲(chǔ)結(jié)構(gòu)和壓縮算法)，現(xiàn)代瀏覽器都支持。
③SVG---Scalable Vector Graphics（svg/svgz）
SVG是由W3C制定的開放標(biāo)準(zhǔn)的圖形格式。SVG字體就是使用SVG技術(shù)來呈現(xiàn)字體，還有一種gzip壓縮格式的SVG字體。
w3c對(duì)其有細(xì)致的講解：SVG
④EOT--- Embedded Open Type (.eot)
微軟老字體，其他瀏覽器不支持，IE4+。
SVG是很值得研究的，這里就不做闡述了，自己最近也在研究svg動(dòng)畫。如果該文對(duì)你有用，不要吝嗇你的愛心“?”哦！
