博客引入漂亮字體二三事

時間  2019-11-05
標籤 博客 引入 漂亮 字體 二三 简体版
原文   原文鏈接

最近興致上來，就想更換了那Blog標題字體(漢字的)；網上搜索了一番，發現蘇新詩柳繁體這款甚合我心；而後就着手搞將了起來，分分鐘也算是替換了；但，這僅僅是這次折騰的開始；這就細細道來做爲學習筆記記載。css

原文首發連接http://www.jeffjade.com/2015/10/28/2015-10-28-css3-webfont/html

CSS3 @font-face

固然要使用自定義字體，就得藉助下@font-face：CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中；@font-face的語法規則以下：css3

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

其取值說明：web

  1. YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如「font-family:"YourWebFontName";」算法

  2. source:此值指的是你自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；chrome

  3. format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；api

  4. weight和style:這兩個值你們必定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。瀏覽器

在@font-face網絡字體技術以前，瀏覽器顯示網頁上文字使用的字體只能限制在電腦裏已經安裝的幾款字體裏。並且每一個人的電腦裏安裝的字體是因人而異的。@font-face的做用是從網上下載並使用自定義字體，使頁面顯示字體不依賴用戶的操做系統字體環境。緩存

好吧，這裏涉及到一個字體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： 規定元素的字體系列。能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

注意：使用某種特定的字體系列（Geneva）徹底取決於用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。所以，強烈推薦使用一個通用字體系列名做爲後路。

網絡字體(Web font)文件格式

WOFF：Web Open Font Format
這種字體格式專門用於網上，由Mozilla聯合其它幾大組織共同開發。WOFF字體一般比其它字體加載的要快些，由於使用了OpenType (OTF)和TrueType (TTF)字體裏的存儲結構和壓縮算法。這種字體格式還能夠加入元信息和受權信息。這種字體格式有君臨天下的趨勢，由於全部的現代瀏覽器都開始支持這種字體格式。

支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

SVG / SVGZ：Scalable Vector Graphics (Font).
SVG是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。只有iPhone上的Safari(4.1)以前的版本支持它。目前火狐、IE都不支持SVG字體格式。火狐推遲對SVG字體的支持，重點放在WOFF格式上。SVGZ是壓縮版的SVG。

支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

OTF / TTF：OpenType Font 和 TrueTypeFont。
.ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化。部分的由於這種格式容易被複制(非法的)，這才催生了WOFF字體格式。然而，OpenType有不少獨特的地方，受到不少設計者的喜好。

【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

EOT：Embedded Open Type。
這是微軟創造的字體格式(是微軟在15年前發明了網絡字體@font-face)。這種格式只在IE6/IE8裏使用。

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本。即：最起碼要支持下這種格式吧。而網上下載的只有.ttf;因此就開始了字體格式轉換。

獲取@font-face所需字體格式

這個階段折騰的老久了。畢竟是漢字的，網絡上搜索的一些在線工具嘗試了很多，很好工做的卻也很少。
最後在這個網站https://onlinefontconverter.com/,獲得了.woff 和 .svg格式的轉換。Here有介紹。

這裏插說一段，在即將放棄的時候，發現了這個網站http://www.fontsquirrel.com/tools/webfont-generator;國外的人士，作事就是認真，一鍵上傳個人.tff格式的字體，它就能夠幫助生成對應的4種格式外加.woff2;而且給出CSS以及對應的Demo實例(使用的是 OPTIMAL模式)。並且文件還至關的小（5種格式字體加起來就有不到150KB）。驚喜之餘，不太相信，一經測試，果真，將漢字給過濾掉了。使用BASIC模式確實能夠不破壞內容的生成各類格式字體，但不免的，也很大(.woff格式3528KB)。不過，對於英文的轉換，仍是至關可取的。如何使用?可ClickHere查看。

搞到此處，於大部分瀏覽器，渲染出蘇新詩柳繁體的標題，是沒問題了。即使在Chrome瀏覽器上一開始是字體未顯示，到被默認字體替代了，加載完畢後才從新以蘇新詩柳繁體渲染出來；而Safari則是，從不顯示直到加載完畢才渲染出來。手機上可以渲染出來須要的時間就更長了(Android由空白到請求完成後渲染)。(@ο@) 哇～，如此體驗着實好*啊。
致使這種現象，必然是各大瀏覽器渲染時存在的差別所致；@w3ctech在響應式網站中，提高加載webfonts的性能一文中有過詳盡的敘述：

A. 若是請求字體還不可用，IE 會當即使用後備字體呈現，並在字體下載完成以後立刻從新呈現；

B. Firefox 和 Chrome 35+ 會首先下載3秒鐘的字體，若是超過3秒鐘後，會使用後備字體渲染網頁，等到指定字體下載完成後再從新渲染網頁；
C. Safari 和 Chrome 35以前的版本，會等到指定字體下載完成後再渲染網頁（PS：就是不會使用後備字體）。

注：以上說明中沒有表示IE的版本以及Safari的版本號，因此須要本身測試才能算正確。
所以，若是網絡鏈接緩慢，在大多數瀏覽器中將延遲超過3秒的文本渲染。在最壞的狀況下，若是你的字體加載帶有時間限制（因爲一些鏈接很慢的移動設備），Safari 用戶將不會再展現文本，剩下一個空白網頁。若是網頁請求超時，最終將只會呈現一個空白網頁。

畢竟用的是較全漢字繁體： .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的寫於提醒：

  1. 若是你的項目中是英文網站，並且項目中的Logo，Tags等應用到較多的這種特殊字體效果，我建議你不要使用圖片效果，而使用@font-face，可是你是中文網站，我以爲仍是使用圖片比較合適，由於加載英文字體和圖片沒有多大區別，可是你加載中文字體，那就不同了，由於中文字體太大了，這樣會影響到項目的某些性能的優化；

  2. 致命的錯誤，你在@font-face中定義時，文件路徑沒有載對；

  3. 你只定義了@font-face，但並無應用到你的項目中的DOM元素上；

就目前個人需求而言，Blog用到這字體，僅是在於標題那5個漢字而已。如不能優化至流暢之境，倒不如採用加載通過Ps處理的圖片呢;畢竟之於體驗和炫酷間抉擇，仍是前者更爲重要些。然，仍是得爲此探究一番，萬一已經好的解決辦法了呢？一查，果然有!喜不自勝。

base64編碼字體，自定義你的網站字體！

CSS3給咱們帶來了@font-face,網頁中能夠展示的字體就不侷限於電腦中已安裝的幾款字體。@font-face的做用是從網上下載並使用自定義字體，使頁面顯示字體不依賴用戶的操做系統字體環境。

然而：字體文件的體積通常都比較大，並且須要額外的http請求鏈接，並且須要兼容多種瀏覽器的話，每每須要三四個或者更多格式的字體文件。尤爲是漢字字體文件；因而乎就有了，WebFont (Web Open Font Format)這個技術，極大滴有針對性的壓縮了字體文件的體積，壓縮了體積就解決了個大問題，很實用。WebFont的字體轉換成base64編碼，直接放在樣式表裏面，哇哦，完美。要實現這個，首先咱們得生成下載須要的字體;畢竟，整個漢字庫辣(那)麼大，即使生成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文件蠻大的話，就須要想點辦法予以處理下才好。

See the Pen MaQOOM by jeffjade (@jeffjade) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

字體文件加載優化

以前已經探明，可使用字體base64編碼信息的CSS字體文件，來替代請求woff格式字體下載；但該CSS文件的大小取決於你選擇的字符集合以及相關方面，也許該文件至關的大（最高可達100~300KB）。所以，使用gzip壓縮以及設置強緩存的方式對於用戶來講是很重要的。

不過幸運的是隻有當你網頁的瀏覽者第一次訪問該CSS文件的時候會發出請求。因爲在第一次的時候，用戶本地沒有該字體文件，因此瀏覽器就會去異步加載他們，而且存儲在localStorage中。當用戶的網絡環境較慢的狀況下，可以看到後備字體以及webfonts渲染過程，不過這些只會發生在用戶第一次訪問你網頁的時候。大多數用戶不會太在乎這一細節。

當用戶第二次網頁頁面的時候，瀏覽器將從localStorage中加載CSS文件內容，這種方式至關的快速（5~50ms）。在這種狀況下用戶看不到任何的閃爍，由於全部的操做將是同步進行的，這僅僅只須要幾毫秒的時間。具體可參見@在響應式網站中，提高加載webfonts的性能一文所書。

體驗至上，優化不止，且學且究，漸探漸優。

參考文章連接：
@font-face的用法
Font-face 字體文件格式
CSS3 @font-face
base64編碼字體，自定義你的網站字體！
在響應式網站中，提高加載webfonts的性能

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程