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