最近興致上來(lái)笼踩，就想更換了那Blog標(biāo)題字體(漢字的)逗爹；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩(shī)柳繁體這款甚合我心嚎于；然后就著手搞將了起來(lái)掘而，分分鐘也算是替換了；但于购，這僅僅是此次折騰的開(kāi)始袍睡；這就細(xì)細(xì)道來(lái)作為學(xué)習(xí)筆記記載。
原文首發(fā)鏈接http://www.jeffjade.com/2015/10/28/2015-10-28-css3-webfont/
CSS3 @font-face
當(dāng)然要使用自定義字體肋僧，就得借助下@font-face：CSS3中的一個(gè)模塊斑胜，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁(yè)中；@font-face的語(yǔ)法規(guī)則如下：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
其取值說(shuō)明：
YourWebFontName:此值指的就是你自定義的字體名稱色瘩，最好是使用你下載的默認(rèn)字體伪窖，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定義的字體的存放路徑居兆，可以是相對(duì)路徑也可以是絕路徑；
format：此值指的是你自定義的字體的格式竹伸，主要用來(lái)幫助瀏覽器識(shí)別泥栖，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style:這兩個(gè)值大家一定很熟悉勋篓，weight定義字體是否為粗體吧享，style主要定義字體樣式，如斜體譬嚣。
在@font-face網(wǎng)絡(luò)字體技術(shù)之前钢颂，瀏覽器顯示網(wǎng)頁(yè)上文字使用的字體只能限制在電腦里已經(jīng)安裝的幾款字體里。而且每個(gè)人的電腦里安裝的字體是因人而異的拜银。@font-face的作用是從網(wǎng)上下載并使用自定義字體殊鞭，使頁(yè)面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境遭垛。
好吧，這里涉及到一個(gè)字體format的問(wèn)題操灿，因?yàn)椴煌臑g覽器對(duì)字體格式支持是不一致的锯仪。使用CSS3自定義字體的時(shí)候，為了兼容所有瀏覽器趾盐，服務(wù)器需要輸出4種格式的字體庶喜，分別是eot、svg救鲤、ttf和woff久窟。所以，若要盡量更全的支持不同瀏覽器本缠，那么這里就得這樣搞了：
@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’),
url(‘myfont-webfont.svg#svgFontName’) format(‘svg’);
}
使用@font-face只是申明&定義了一種字體瘸羡；使用時(shí)還是得根據(jù)font-family特性加入些默認(rèn)字體以留后路。即便如此搓茬，之后也會(huì)有些問(wèn)題犹赖。W3C中描述如下：
font-family： 規(guī)定元素的字體系列【砺兀可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來(lái)保存峻村。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)锡凝。也就是說(shuō)粘昨，font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值窜锯。
注意：使用某種特定的字體系列（Geneva）完全取決于用戶機(jī)器上該字體系列是否可用张肾；這個(gè)屬性沒(méi)有指示任何字體下載。因此锚扎，強(qiáng)烈推薦使用一個(gè)通用字體系列名作為后路吞瞪。
網(wǎng)絡(luò)字體(Web font)文件格式
WOFF：Web Open Font Format
這種字體格式專門(mén)用于網(wǎng)上，由Mozilla聯(lián)合其它幾大組織共同開(kāi)發(fā)驾孔。WOFF字體通常比其它字體加載的要快些芍秆，因?yàn)槭褂昧薕penType (OTF)和TrueType (TTF)字體里的存儲(chǔ)結(jié)構(gòu)和壓縮算法。這種字體格式還可以加入元信息和授權(quán)信息翠勉。這種字體格式有君臨天下的趨勢(shì)妖啥，因?yàn)樗械默F(xiàn)代瀏覽器都開(kāi)始支持這種字體格式。
支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】对碌；
SVG / SVGZ：Scalable Vector Graphics (Font).
SVG是一種用矢量圖格式改進(jìn)的字體格式荆虱，體積上比矢量圖更小，適合在手機(jī)設(shè)備上使用。只有iPhone上的Safari(4.1)之前的版本支持它怀读。目前火狐诉位、IE都不支持SVG字體格式≡复担火狐推遲對(duì)SVG字體的支持不从，重點(diǎn)放在WOFF格式上。SVGZ是壓縮版的SVG犁跪。
支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】椿息。
OTF / TTF：OpenType Font 和 TrueTypeFont。
.ttf字體是Windows和Mac的最常見(jiàn)的字體坷衍，是一種RAW格式寝优，因此他不為網(wǎng)站優(yōu)化。部分的因?yàn)檫@種格式容易被復(fù)制(非法的)枫耳，這才催生了WOFF字體格式乏矾。然而，OpenType有很多獨(dú)特的地方迁杨，受到很多設(shè)計(jì)者的喜愛(ài)钻心。
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
EOT：Embedded Open Type铅协。
這是微軟創(chuàng)造的字體格式(是微軟在15年前發(fā)明了網(wǎng)絡(luò)字體@font-face)捷沸。這種格式只在IE6/IE8里使用。
.woff字體是Web字體中最佳格式狐史，他是一個(gè)開(kāi)放的TrueType/OpenType的壓縮版本痒给。即：最起碼要支持下這種格式吧。而網(wǎng)上下載的只有.ttf;所以就開(kāi)始了字體格式轉(zhuǎn)換骏全。
獲取@font-face所需字體格式
這個(gè)階段折騰的老久了苍柏。畢竟是漢字的，網(wǎng)絡(luò)上搜索的一些在線工具嘗試了不少姜贡，很好工作的卻也不多试吁。
最后在這個(gè)網(wǎng)站https://onlinefontconverter.com/,得到了.woff 和 .svg格式的轉(zhuǎn)換。Here有介紹鲁豪。
這里插說(shuō)一段潘悼，在即將放棄的時(shí)候，發(fā)現(xiàn)了這個(gè)網(wǎng)站http://www.fontsquirrel.com/tools/webfont-generator;國(guó)外的人士爬橡，做事就是認(rèn)真，一鍵上傳我的.tff格式的字體棒动，它就可以幫助生成對(duì)應(yīng)的4種格式外加.woff2;并且給出CSS以及對(duì)應(yīng)的Demo實(shí)例(使用的是 OPTIMAL模式)糙申。而且文件還相當(dāng)?shù)男。?種格式字體加起來(lái)就有不到150KB）船惨。驚喜之余柜裸，不太相信缕陕，一經(jīng)測(cè)試，果然疙挺，將漢字給過(guò)濾掉了扛邑。使用BASIC模式確實(shí)可以不破壞內(nèi)容的生成各種格式字體，但難免的铐然，也很大(.woff格式3528KB)蔬崩。不過(guò)，對(duì)于英文的轉(zhuǎn)換搀暑，還是相當(dāng)可取的沥阳。如何使用?可ClickHere查看。
搞到此處自点，于大部分瀏覽器桐罕，渲染出蘇新詩(shī)柳繁體的標(biāo)題，是沒(méi)問(wèn)題了桂敛。即便在Chrome瀏覽器上一開(kāi)始是字體未顯示功炮，到被默認(rèn)字體替代了，加載完畢后才重新以蘇新詩(shī)柳繁體渲染出來(lái)术唬；而Safari則是薪伏，從不顯示直到加載完畢才渲染出來(lái)。手機(jī)上能夠渲染出來(lái)需要的時(shí)間就更長(zhǎng)了(Android由空白到請(qǐng)求完成后渲染)碴开。(@ο@) 哇～毅该，如此體驗(yàn)著實(shí)好*啊。
導(dǎo)致這種現(xiàn)象潦牛，必然是各大瀏覽器渲染時(shí)存在的差異所致眶掌；@w3ctech在響應(yīng)式網(wǎng)站中，提升加載webfonts的性能一文中有過(guò)詳盡的敘述：
A. 如果請(qǐng)求字體還不可用巴碗，IE 會(huì)立即使用后備字體呈現(xiàn)朴爬，并在字體下載完成之后馬上重新呈現(xiàn)；
B. Firefox 和 Chrome 35+ 會(huì)首先下載3秒鐘的字體橡淆，如果超過(guò)3秒鐘后召噩，會(huì)使用后備字體渲染網(wǎng)頁(yè)，等到指定字體下載完成后再重新渲染網(wǎng)頁(yè)逸爵；
C. Safari 和 Chrome 35之前的版本具滴，會(huì)等到指定字體下載完成后再渲染網(wǎng)頁(yè)（PS：就是不會(huì)使用后備字體）。注：以上說(shuō)明中沒(méi)有表示IE的版本以及Safari的版本號(hào)师倔，所以需要自己測(cè)試才能算正確构韵。
因此，如果網(wǎng)絡(luò)連接緩慢，在大多數(shù)瀏覽器中將延遲超過(guò)3秒的文本渲染疲恢。在最壞的情況下凶朗，如果你的字體加載帶有時(shí)間限制（由于一些連接很慢的移動(dòng)設(shè)備），Safari 用戶將不會(huì)再展示文本显拳，剩下一個(gè)空白網(wǎng)頁(yè)棚愤。如果網(wǎng)頁(yè)請(qǐng)求超時(shí)，最終將只會(huì)呈現(xiàn)一個(gè)空白網(wǎng)頁(yè)杂数。
畢竟用的是較全漢字繁體： .ttf格式5735KB;.woff格式3534KB,.svg格式竟然11622KB,有點(diǎn)醉了宛畦，555。根據(jù)@張?chǎng)涡襁@篇fontforge制作自定義字體及在手機(jī)上應(yīng)用舉例文中提到的耍休，可以采取軟件(Eg:fontforge)提取出自己想要的部分,從而減小字體文件的大小刃永，來(lái)增強(qiáng)體驗(yàn)；但是我這邊是漢字羊精，折騰起來(lái)不容易啊斯够，555。如此喧锦，就牽扯到了：網(wǎng)絡(luò)字體(Web font)的效率問(wèn)題了读规。
網(wǎng)絡(luò)字體(Web font)的效率
字體文件的體積可能非常的大(尤其是對(duì)于漢字)，而且需要額外的HTTP連接燃少，這些都會(huì)降低網(wǎng)站頁(yè)面的加載速度束亏。所以，在使用網(wǎng)絡(luò)字體@font-face前阵具，根據(jù)網(wǎng)絡(luò)上的說(shuō)法：需要清楚它的利與弊碍遍，判斷網(wǎng)絡(luò)字體是否真的有必要用在你的網(wǎng)站頁(yè)面上。
如果你決定使用個(gè)性化自定義字體阳液，可以采用一個(gè)非常靈活的方法怕敬，就是只加載盡量少的字體字符數(shù)和盡量少的字體風(fēng)格(粗體/斜體)。例如帘皿，如果你使用谷歌字體东跪，你可以只加載指定的字體風(fēng)格組合：
@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);
以下是@Airen的博客對(duì)于使用@font-face的寫(xiě)于提醒：
- 如果你的項(xiàng)目中是英文網(wǎng)站，而且項(xiàng)目中的Logo鹰溜，Tags等應(yīng)用到較多的這種特殊字體效果虽填，我建議你不要使用圖片效果，而使用@font-face曹动，但是你是中文網(wǎng)站斋日，我覺(jué)得還是使用圖片比較合適，因?yàn)榧虞d英文字體和圖片沒(méi)有多大區(qū)別墓陈，但是你加載中文字體桑驱，那就不一樣了竭恬，因?yàn)橹形淖煮w太大了跛蛋，這樣會(huì)影響到項(xiàng)目的某些性能的優(yōu)化熬的；
- 致命的錯(cuò)誤，你在@font-face中定義時(shí)赊级，文件路徑?jīng)]有載對(duì)押框；
- 你只定義了@font-face，但并沒(méi)有應(yīng)用到你的項(xiàng)目中的DOM元素上理逊；
就目前我的需求而言橡伞，Blog用到這字體，僅是在于標(biāo)題那5個(gè)漢字而已晋被。如不能優(yōu)化至流暢之境兑徘，倒不如采用加載經(jīng)過(guò)Ps處理的圖片呢;畢竟之于體驗(yàn)和炫酷間抉擇，還是前者更為重要些羡洛。然挂脑，還是得為此探究一番，萬(wàn)一已經(jīng)好的解決辦法了呢欲侮？一查崭闲，果真有!喜不自勝。
base64編碼字體威蕉，自定義你的網(wǎng)站字體刁俭！
CSS3給我們帶來(lái)了@font-face,網(wǎng)頁(yè)中可以展現(xiàn)的字體就不局限于電腦中已安裝的幾款字體。@font-face的作用是從網(wǎng)上下載并使用自定義字體韧涨，使頁(yè)面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境牍戚。
然而：字體文件的體積一般都比較大，而且需要額外的http請(qǐng)求連接虑粥，而且需要兼容多種瀏覽器的話如孝，往往需要三四個(gè)或者更多格式的字體文件。尤其是漢字字體文件舀奶；于是乎就有了暑竟，WebFont (Web Open Font Format)這個(gè)技術(shù)，極大滴有針對(duì)性的壓縮了字體文件的體積育勺，壓縮了體積就解決了個(gè)大問(wèn)題但荤，很實(shí)用。WebFont的字體轉(zhuǎn)換成base64編碼涧至，直接放在樣式表里面腹躁，哇哦，完美南蓬。要實(shí)現(xiàn)這個(gè)纺非，首先我們得生成下載需要的字體;畢竟哑了，整個(gè)漢字庫(kù)辣(那)么大，即便生成base64烧颖，其體積也不小哇弱左。
生成下載需要的字體
先設(shè)置我們要使用的文字，使用WebFont炕淮，推薦阿里媽媽W(xué)ebFont平臺(tái)http://www.iconfont.cn/webfont/#!/webfont/index和有字庫(kù)http://www.youziku.com/拆火，使用簡(jiǎn)單粗暴，輸入你要的文字涂圆，下載就完了们镜，代碼都給你生成好了。
@font-face {font-family: 'webfont';
src: url('//at.alicdn.com/t/glgkzeyrgbonu3di.eot'); /* IE9*/
src: url('//at.alicdn.com/t/glgkzeyrgbonu3di.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/glgkzeyrgbonu3di.woff') format('woff'), /* chrome润歉、firefox */
url('//at.alicdn.com/t/glgkzeyrgbonu3di.ttf') format('truetype'), /* chrome模狭、firefox、opera踩衩、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/glgkzeyrgbonu3di.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */
}
ctrl+c ctrl+v 就解決了需求嚼鹉，在需要的地方使用即可（這里可以直接使用它給你生成的在線字體woff格式等文件【只有你輸入的那些漢字喔】），兼容至BT的IE6九妈，簡(jiǎn)直碉堡反砌。但，好吧萌朱，世間沒(méi)有那么完美的事兒喔宴树。阿里媽媽webfont平臺(tái)只有思源系的5種不同字體而已，哭暈晶疼，沒(méi)有我傾愛(ài)的蘇新詩(shī)柳啊酒贬。
base64編碼字體
經(jīng)過(guò)譬如上面操作，得到字體文件之后翠霍，即可運(yùn)用一些軟件（譬如http://www.giftofspeed.com/base64-encoder/編碼之锭吨，使之生成base64編碼string。使用：把處理好了的base64編碼放在下面代碼中(直接替代xxxxx即可)寒匙，然后調(diào)用webfont-base這個(gè)定義好的字體零如，大功告成！
@font-face {
font-family: 'webfont-base';
src: url(data:font/truetype;charset=utf-8;base64,XXXXXXXXXXXXXXXXX) format('truetype');
font-weight: normal;
font-style: normal
}
額锄弱，好吧考蕾，使用這個(gè)網(wǎng)站生成的base64也是奇葩的－－有很多空格換行，base64文件蠻大的話会宪，就需要想點(diǎn)辦法予以處理下才好肖卧。
<p data-height="268" data-theme-id="20035" data-slug-hash="MaQOOM" data-default-tab="result" data-user="jeffjade" class='codepen'>See the Pen <a >MaQOOM</a> by jeffjade (<a >@jeffjade</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
字體文件加載優(yōu)化
之前已經(jīng)探明，可以使用字體base64編碼信息的CSS字體文件掸鹅，來(lái)替代請(qǐng)求woff格式字體下載塞帐；但該CSS文件的大小取決于你選擇的字符集合以及相關(guān)方面拦赠，也許該文件相當(dāng)?shù)拇螅ㄗ罡呖蛇_(dá)100~300KB）。因此葵姥，使用gzip壓縮以及設(shè)置強(qiáng)緩存的方式對(duì)于用戶來(lái)說(shuō)是很重要的荷鼠。
不過(guò)幸運(yùn)的是只有當(dāng)你網(wǎng)頁(yè)的瀏覽者第一次訪問(wèn)該CSS文件的時(shí)候會(huì)發(fā)出請(qǐng)求。由于在第一次的時(shí)候牌里，用戶本地沒(méi)有該字體文件颊咬，所以瀏覽器就會(huì)去異步加載他們，并且存儲(chǔ)在localStorage中牡辽。當(dāng)用戶的網(wǎng)絡(luò)環(huán)境較慢的情況下，能夠看到后備字體以及webfonts渲染過(guò)程敞临，不過(guò)這些只會(huì)發(fā)生在用戶第一次訪問(wèn)你網(wǎng)頁(yè)的時(shí)候态辛。大多數(shù)用戶不會(huì)太在意這一細(xì)節(jié)。
當(dāng)用戶第二次網(wǎng)頁(yè)頁(yè)面的時(shí)候挺尿，瀏覽器將從localStorage中加載CSS文件內(nèi)容奏黑，這種方式相當(dāng)?shù)目焖伲?~50ms）。在這種情況下用戶看不到任何的閃爍编矾，因?yàn)樗械牟僮鲗⑹峭竭M(jìn)行的熟史，這僅僅只需要幾毫秒的時(shí)間。具體可參見(jiàn)@在響應(yīng)式網(wǎng)站中窄俏，提升加載webfonts的性能一文所書(shū)蹂匹。
體驗(yàn)至上，優(yōu)化不止凹蜈，且學(xué)且究限寞，漸探漸優(yōu)。
參考文章鏈接：
@font-face的用法
Font-face 字體文件格式
CSS3 @font-face
base64編碼字體仰坦，自定義你的網(wǎng)站字體履植！
在響應(yīng)式網(wǎng)站中，提升加載webfonts的性能
