摘要：本篇文章包括（1）介紹@font-face（2）如何在網頁中使用@font-face插入特殊字體（3）中文在線@font-face——有字庫（4）修改hexo主題字體
自從在hexo上安裝了pacmen主題之后，就一直對pacman主題header上的textlogo和footer上intro_line的字體很感興趣，因為我的電腦和手機上并沒有安裝該字體，但是無論是在任何終端上，瀏覽的體驗都是一致的，然后查找了一些資料，發現這是CSS3中的一個功能模塊@font-face，主要用于實現網頁字體多樣性。
@font-face功能
制作網站難免有些字體不是默認的，通過@font-face可以加載自己特定的字體，來實現特定的文字效果。
@font-face語句是css中的一個功能模塊，用于實現網頁字體多樣性(設計者可隨意指定字體，不需要考慮瀏覽者電腦上是否安裝)。主要是把自己定義的Web字體嵌入到你的網頁中，隨著@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體，
@font-face 不能說他是什么新東西了，在 CSS2.0 規范中就有了這玩意兒，IE4.0 開始就已經出現，只是當時用的不是特別廣泛，后來在 CSS2.1 草案中又被刪掉。隨著 web 的急速發展，@font-face 價值越來越凸顯，然后再次被納入 CSS3 草案中。@font-face 是個什么東西，本文不做過多說明，不太清楚的童鞋可以看這里
@font-face文件
而由于網頁中使用的字體類型，也是各瀏覽器對字體類型有不同的支持規格。 字體格式類型主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
TrueType
Windows和Mac系統最常用的字體格式，其最大的特點就是它是由一種數學模式來進行定義的基于輪廓技術的字體，這使得它們比基于矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。
EOT– Embedded Open Type (.eot)
EOT是嵌入式字體，是微軟開發的技術。允許OpenType字體用@font-face嵌入到網頁并下載至瀏覽器渲染，存儲在臨時安裝文件夾下。
OpenType(.otf)
OpenType是微軟和Adobe共同開發的字體，微軟的IE瀏覽器全部采用這種字體。致力于替代TrueType字體。
WOFF–WebOpen Font Format (.woff)
WOFF（Web開發字體格式）是一種專門為了Web而設計的字體格式標準，實際上是對于TrueType/OpenType等字體格式的封裝，每個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便于網絡傳輸。
SVG(Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。
@font-face聲明字體
由于每種瀏覽器對@font-face的兼容性不同，不同的瀏覽器對字體的支持格式不同，這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。
| 瀏覽器 | 支持類型 |
|---|---|
| IE6,7,8 | 僅支持 Embedded OpenType(.eot) 格式。 |
| Firefox 3.5 | 支持 TrueType、OpenType(.ttf, .otf) 格式。 |
| Firefox 3.6 | 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。 |
| Chrome,Safari,Opera | 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}
但為了讓各多的瀏覽器支持，你也可以寫成：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
使用@font-face實現網頁中插入特殊字體的過程
獲取特殊字體
這里我們要用到的是Single Malta字體
要得到Single Malta字體，不外乎兩種途徑，其一找到付費網站購買字體，其二就是到免費網站DownLoad字體。當然要給錢的這種傻事我想大家都不會做的，那我們就得到免費的地方下載，在哪有呢？我平時都是到Google Web Fonts和Dafont.com尋找自己需要的字體，當然網上也還有別的下載字體的地方，這個Demo使用的是Dafont.com的Single Malta字體，這樣就可以到這里下載Single Malta：
獲取@font-face所需字體格式
由于不同瀏覽器支持的字體文件不同，我們需要想辦法獲得@font-face所需的.eot,.woff,.ttf,.svg字體格式，這里我們用到了一個網站fontsquirrel，可以方便的幫助我們實現字體格式的轉換
進入網站后點擊
Add Fonts按鈕，上傳我們剛剛下載好的字體文件（要先把SingleMalta.ttf從.zip壓縮包中解壓出來），通常選擇中間默認的OPTIMAL選項即可，然后勾選Agreement,點擊DOWNLOAD YOU KIT，稍等片刻，即可下載我們所需要的字體文件。解壓壓縮包包可以看到已經轉換好的字體文件，如下圖：
大家可以看到，解壓縮出來的文件格式，里面除了@font-face所需要的字體格式外，還帶有一個DEMO文件，如果你不清楚的也可以參考下載下來的DEMO文件，我在這里不對DEMO說明問題，我主要是給大家介紹如何把下載下來的文件有價值的運用到我們的項目中。
應用@font-face到我們的項目中
這里我們新建一個DOME項目，目錄包括一個fonts文件夾，里面存放的轉換好的字體文件；一個css文件夾，用于存放ccs文件；和一個index.html入口文件。目錄和html如下
style.css代碼
@font-face {
font-family: 'SingleMaltaRegular';
src: url('../fonts/singlemalta-webfont.eot');
src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../fonts/singlemalta-webfont.ttf') format('truetype'),
url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1.SingleMalta{
font-family: 'SingleMaltaRegular';
}
body{
background-color: rgb(123,234,234);
}
上傳到服務器，效果如下
更改hexo的textlog字體
pacman的字體資源是儲存在pacman主題文件夾下source/font之中的，關于@font-face聲明是儲存在source/css/_base/font.styl配置文件之中，查看pacman的配置文件_config.yml找到字體選項Font通過注釋可以了解到，頁面的字體配置是保存在source/css/_base/variable.styl之中，如下圖所示
首先將解壓出來的.eot,.woff,.ttf,.svg字體文件放入font文件夾中，找到source/css/_base/font.styl配置文件，可以看到pacman已經幫我們建立了一個通用的聲明，所以我們無需修改聲明，只需要在variable.styl中修改頁面字體配置即可，將font-custom-family``font-custom-filename改成我們的字體名和文件名即可
font-custom-family = "SingleMaltaRegular"（隨意）
font-custom-filename = singlemalta-webfont
刷新頁面即可看到效果，如下圖：
中文@font-face
上面的這些@font-face轉換網站都不支持中文字體的轉換，中文字體文件相對于英文顯得過于龐大，很長一段時間都被認為是不適合嵌入網頁的。
直到幾年前，這個問題終于被一個日本網站解決了，他用的技術就是截取法，在前端置入一個js腳本，腳本自動根據網頁內容適時生成一個小字庫（只包含當前網頁內容的小字庫）然后自動轉換成.ttf、.eot、.woff、.svg等格式嵌入網頁中，從頁實現@font-face效果。體驗和英文@font-face差不多，效果非常漂亮。但日文@font-face網站對于中文網頁還無法支持。
如果是你想在你的網頁上使用中文簡體@font-face服務，也不是不可能，推薦一個中文@font-face網站——“有字庫”。
使用時，只需要引用一段js腳本代碼或者一段css代碼，網站就會自動幫你截取網頁需要的小字庫并生成.ttf、.eot、.woff、.svg等格式文件，你可以將各文件下載下來，也可以托管在這個網站上，非常方便。去試試吧
有字庫測試
<html>
<head>
<title>font test</title>
<meta http-equiv="content-type" charset="utf-8" content="text/html"
</head>
<body>
<h1 class="SiYuanRegular">中國文字之美</h1>
<p class="SiYuanRegular">思源黑體測試</p>
<h1 >中國文字之美</h1>
<p >思源黑體測試</p>
</body> //有字庫生成的JS腳本插入</body>和</html>之間
<script type="text/javascript" src="http://www.youziku.com/UserDownFile/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youziku.com/UserDownFile/jquery.md5.js"></script>
<script type="text/javascript">
function youziku46827() {
var resultStr = $(".SiYuanRegular").text();
var md5 = "";
resultStr = Trim(resultStr);
resultStr = SelectWord(resultStr);
md5 = $.md5("08d5ae7dc2e04646b67b8f08909cc995"+"SiYuanRegular" + resultStr);
$.getJSON("http://www.youziku.com/webfont/CSSPOST?jsoncallback=?", { "id": md5, "guid": "08d5ae7dc2e04646b67b8f08909cc995", "type": "5" }, function (json) {
if (json.result == 0) {/*alert("需要生成");*/
$.post("http://www.youziku.com/webfont/PostCorsCreateFont", { "name": "SiYuanRegular", "gid": "08d5ae7dc2e04646b67b8f08909cc995", "type": "5", "text": resultStr }, function (json) {
if (json == "0") { /*alert("參數不對");*/
} else if (json == "2") {/*alert("超過每日生成字體數的上限");*/
} else if (json == "3") { /*alert("當前正在生成請稍后");*/
} else {/*alert("正在生成");*/
}
});
}
else {/*alert("下載css文件");*/
loadExtentFile("http://www.youziku.com/webfont/css?id=" + md5 + "&guid=" + "08d5ae7dc2e04646b67b8f08909cc995" + "&type=5");
}
});
}
(function youziku() {
if (window.location.href.toString().substring(0, 7) == "file://") {
alert("你當前是通過雙擊打開html文件，進行本地測試的，這樣看不到字體效果，一定要通過本地建立的虛擬網站或發布到外網進行測試。詳見有字庫的使用說明。");
}else{
youziku46827();
}
})()
</script>
</html>
測試效果
