最近興致上來，就想更換了那Blog標(biāo)題字體(漢字的)；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細(xì)細(xì)道來作為學(xué)習(xí)筆記記載。
原文首發(fā)鏈接http://www.jeffjade.com/2015/10/28/2015-10-28-css3-webfont/
CSS3 @font-face
當(dāng)然要使用自定義字體，就得借助下@font-face：CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中；@font-face的語法規(guī)則如下：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
其取值說明：
YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認(rèn)字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；
format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。
在@font-face網(wǎng)絡(luò)字體技術(shù)之前，瀏覽器顯示網(wǎng)頁上文字使用的字體只能限制在電腦里已經(jīng)安裝的幾款字體里。而且每個人的電腦里安裝的字體是因人而異的。@font-face的作用是從網(wǎng)上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。
好吧，這里涉及到一個字體format的問題，因?yàn)椴煌臑g覽器對字體格式支持是不一致的。使用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)字體以留后路。即便如此，之后也會有些問題。W3C中描述如下：
font-family： 規(guī)定元素的字體系列。可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表。瀏覽器會使用它可識別的第一個值。
注意：使用某種特定的字體系列（Geneva）完全取決于用戶機(jī)器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強(qiáng)烈推薦使用一個通用字體系列名作為后路。
網(wǎng)絡(luò)字體(Web font)文件格式
WOFF：Web Open Font Format
這種字體格式專門用于網(wǎng)上，由Mozilla聯(lián)合其它幾大組織共同開發(fā)。WOFF字體通常比其它字體加載的要快些，因?yàn)槭褂昧薕penType (OTF)和TrueType (TTF)字體里的存儲結(jié)構(gòu)和壓縮算法。這種字體格式還可以加入元信息和授權(quán)信息。這種字體格式有君臨天下的趨勢，因?yàn)樗械默F(xiàn)代瀏覽器都開始支持這種字體格式。
支持這種字體的瀏覽器有【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字體格式。火狐推遲對SVG字體的支持，重點(diǎn)放在WOFF格式上。SVGZ是壓縮版的SVG。
支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
OTF / TTF：OpenType Font 和 TrueTypeFont。
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網(wǎng)站優(yōu)化。部分的因?yàn)檫@種格式容易被復(fù)制(非法的)，這才催生了WOFF字體格式。然而，OpenType有很多獨(dú)特的地方，受到很多設(shè)計(jì)者的喜愛。
【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字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本。即：最起碼要支持下這種格式吧。而網(wǎng)上下載的只有.ttf;所以就開始了字體格式轉(zhuǎn)換。
獲取@font-face所需字體格式
這個階段折騰的老久了。畢竟是漢字的，網(wǎng)絡(luò)上搜索的一些在線工具嘗試了不少，很好工作的卻也不多。
最后在這個網(wǎng)站https://onlinefontconverter.com/,得到了.woff 和 .svg格式的轉(zhuǎn)換。Here有介紹。
這里插說一段，在即將放棄的時(shí)候，發(fā)現(xiàn)了這個網(wǎng)站http://www.fontsquirrel.com/tools/webfont-generator;國外的人士，做事就是認(rèn)真，一鍵上傳我的.tff格式的字體，它就可以幫助生成對應(yīng)的4種格式外加.woff2;并且給出CSS以及對應(yīng)的Demo實(shí)例(使用的是 OPTIMAL模式)。而且文件還相當(dāng)?shù)男。?種格式字體加起來就有不到150KB）。驚喜之余，不太相信，一經(jīng)測試，果然，將漢字給過濾掉了。使用BASIC模式確實(shí)可以不破壞內(nèi)容的生成各種格式字體，但難免的，也很大(.woff格式3528KB)。不過，對于英文的轉(zhuǎn)換，還是相當(dāng)可取的。如何使用?可ClickHere查看。
搞到此處，于大部分瀏覽器，渲染出蘇新詩柳繁體的標(biāo)題，是沒問題了。即便在Chrome瀏覽器上一開始是字體未顯示，到被默認(rèn)字體替代了，加載完畢后才重新以蘇新詩柳繁體渲染出來；而Safari則是，從不顯示直到加載完畢才渲染出來。手機(jī)上能夠渲染出來需要的時(shí)間就更長了(Android由空白到請求完成后渲染)。(@ο@) 哇～，如此體驗(yàn)著實(shí)好*啊。
導(dǎo)致這種現(xiàn)象，必然是各大瀏覽器渲染時(shí)存在的差異所致；@w3ctech在響應(yīng)式網(wǎng)站中，提升加載webfonts的性能一文中有過詳盡的敘述：
A. 如果請求字體還不可用，IE 會立即使用后備字體呈現(xiàn)，并在字體下載完成之后馬上重新呈現(xiàn)；
B. Firefox 和 Chrome 35+ 會首先下載3秒鐘的字體，如果超過3秒鐘后，會使用后備字體渲染網(wǎng)頁，等到指定字體下載完成后再重新渲染網(wǎng)頁；
C. Safari 和 Chrome 35之前的版本，會等到指定字體下載完成后再渲染網(wǎng)頁（PS：就是不會使用后備字體）。注：以上說明中沒有表示IE的版本以及Safari的版本號，所以需要自己測試才能算正確。
因此，如果網(wǎng)絡(luò)連接緩慢，在大多數(shù)瀏覽器中將延遲超過3秒的文本渲染。在最壞的情況下，如果你的字體加載帶有時(shí)間限制（由于一些連接很慢的移動設(shè)備），Safari 用戶將不會再展示文本，剩下一個空白網(wǎng)頁。如果網(wǎng)頁請求超時(shí)，最終將只會呈現(xiàn)一個空白網(wǎng)頁。
畢竟用的是較全漢字繁體： .ttf格式5735KB;.woff格式3534KB,.svg格式竟然11622KB,有點(diǎn)醉了，555。根據(jù)@張鑫旭這篇fontforge制作自定義字體及在手機(jī)上應(yīng)用舉例文中提到的，可以采取軟件(Eg:fontforge)提取出自己想要的部分,從而減小字體文件的大小，來增強(qiáng)體驗(yàn)；但是我這邊是漢字，折騰起來不容易啊，555。如此，就牽扯到了：網(wǎng)絡(luò)字體(Web font)的效率問題了。
網(wǎng)絡(luò)字體(Web font)的效率
字體文件的體積可能非常的大(尤其是對于漢字)，而且需要額外的HTTP連接，這些都會降低網(wǎng)站頁面的加載速度。所以，在使用網(wǎng)絡(luò)字體@font-face前，根據(jù)網(wǎng)絡(luò)上的說法：需要清楚它的利與弊，判斷網(wǎng)絡(luò)字體是否真的有必要用在你的網(wǎng)站頁面上。
如果你決定使用個性化自定義字體，可以采用一個非常靈活的方法，就是只加載盡量少的字體字符數(shù)和盡量少的字體風(fēng)格(粗體/斜體)。例如，如果你使用谷歌字體，你可以只加載指定的字體風(fēng)格組合：
@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);
以下是@Airen的博客對于使用@font-face的寫于提醒：
- 如果你的項(xiàng)目中是英文網(wǎng)站，而且項(xiàng)目中的Logo，Tags等應(yīng)用到較多的這種特殊字體效果，我建議你不要使用圖片效果，而使用@font-face，但是你是中文網(wǎng)站，我覺得還是使用圖片比較合適，因?yàn)榧虞d英文字體和圖片沒有多大區(qū)別，但是你加載中文字體，那就不一樣了，因?yàn)橹形淖煮w太大了，這樣會影響到項(xiàng)目的某些性能的優(yōu)化；
- 致命的錯誤，你在@font-face中定義時(shí)，文件路徑?jīng)]有載對；
- 你只定義了@font-face，但并沒有應(yīng)用到你的項(xiàng)目中的DOM元素上；
就目前我的需求而言，Blog用到這字體，僅是在于標(biāo)題那5個漢字而已。如不能優(yōu)化至流暢之境，倒不如采用加載經(jīng)過Ps處理的圖片呢;畢竟之于體驗(yàn)和炫酷間抉擇，還是前者更為重要些。然，還是得為此探究一番，萬一已經(jīng)好的解決辦法了呢？一查，果真有!喜不自勝。
base64編碼字體，自定義你的網(wǎng)站字體！
CSS3給我們帶來了@font-face,網(wǎng)頁中可以展現(xiàn)的字體就不局限于電腦中已安裝的幾款字體。@font-face的作用是從網(wǎng)上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。
然而：字體文件的體積一般都比較大，而且需要額外的http請求連接，而且需要兼容多種瀏覽器的話，往往需要三四個或者更多格式的字體文件。尤其是漢字字體文件；于是乎就有了，WebFont (Web Open Font Format)這個技術(shù)，極大滴有針對性的壓縮了字體文件的體積，壓縮了體積就解決了個大問題，很實(shí)用。WebFont的字體轉(zhuǎn)換成base64編碼，直接放在樣式表里面，哇哦，完美。要實(shí)現(xiàn)這個，首先我們得生成下載需要的字體;畢竟，整個漢字庫辣(那)么大，即便生成base64，其體積也不小哇。
生成下載需要的字體
先設(shè)置我們要使用的文字，使用WebFont，推薦阿里媽媽W(xué)ebFont平臺http://www.iconfont.cn/webfont/#!/webfont/index和有字庫http://www.youziku.com/，使用簡單粗暴，輸入你要的文字，下載就完了，代碼都給你生成好了。
@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，簡直碉堡。但，好吧，世間沒有那么完美的事兒喔。阿里媽媽webfont平臺只有思源系的5種不同字體而已，哭暈，沒有我傾愛的蘇新詩柳啊。
base64編碼字體
經(jīng)過譬如上面操作，得到字體文件之后，即可運(yùn)用一些軟件（譬如http://www.giftofspeed.com/base64-encoder/編碼之，使之生成base64編碼string。使用：把處理好了的base64編碼放在下面代碼中(直接替代xxxxx即可)，然后調(diào)用webfont-base這個定義好的字體，大功告成！
@font-face {
font-family: 'webfont-base';
src: url(data:font/truetype;charset=utf-8;base64,XXXXXXXXXXXXXXXXX) format('truetype');
font-weight: normal;
font-style: normal
}
額，好吧，使用這個網(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字體文件，來替代請求woff格式字體下載；但該CSS文件的大小取決于你選擇的字符集合以及相關(guān)方面，也許該文件相當(dāng)?shù)拇螅ㄗ罡呖蛇_(dá)100~300KB）。因此，使用gzip壓縮以及設(shè)置強(qiáng)緩存的方式對于用戶來說是很重要的。
不過幸運(yùn)的是只有當(dāng)你網(wǎng)頁的瀏覽者第一次訪問該CSS文件的時(shí)候會發(fā)出請求。由于在第一次的時(shí)候，用戶本地沒有該字體文件，所以瀏覽器就會去異步加載他們，并且存儲在localStorage中。當(dāng)用戶的網(wǎng)絡(luò)環(huán)境較慢的情況下，能夠看到后備字體以及webfonts渲染過程，不過這些只會發(fā)生在用戶第一次訪問你網(wǎng)頁的時(shí)候。大多數(shù)用戶不會太在意這一細(xì)節(jié)。
當(dāng)用戶第二次網(wǎng)頁頁面的時(shí)候，瀏覽器將從localStorage中加載CSS文件內(nèi)容，這種方式相當(dāng)?shù)目焖伲?~50ms）。在這種情況下用戶看不到任何的閃爍，因?yàn)樗械牟僮鲗⑹峭竭M(jìn)行的，這僅僅只需要幾毫秒的時(shí)間。具體可參見@在響應(yīng)式網(wǎng)站中，提升加載webfonts的性能一文所書。
體驗(yàn)至上，優(yōu)化不止，且學(xué)且究，漸探漸優(yōu)。
參考文章鏈接：
@font-face的用法
Font-face 字體文件格式
CSS3 @font-face
base64編碼字體，自定義你的網(wǎng)站字體！
在響應(yīng)式網(wǎng)站中，提升加載webfonts的性能
