本頁面由 Cloud Translation API 翻譯而成。

使用 @font-face 製作 Webfont 的快速指南

Paul Irish

簡介

CSS3 的 @font-face 功能，讓我們能夠以易於閱讀、操作及可擴充的方式在網頁上使用自訂字體。不過，你可以說：「如果我們有 Cufon、sIFR 且在圖片中使用文字，為什麼我們會使用 @font-face？」使用 @font-face 自訂字型的幾個優點：

依尋找項目完整搜尋 (ctrl-F)
輔助技術 (例如螢幕閱讀器) 的無障礙功能
可透過瀏覽器內翻譯或翻譯服務翻譯文字
CSS 可完全調整字體排版顯示方式，包括 line-height、letter-spacing、text-shadow、text-align，以及 ::first-letter 和 ::first-line 等選取器

@font-face 撰寫時

最基本的做法是宣告一個新的自訂遠端字型，如下所示：

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

然後將其用到：

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

在此 @font-face 宣告中，我們使用 font-family 屬性明確命名字型。無論字型實際使用哪種字型，font-family: 'SuperDuperComicSans'; 都可行；雖然 font-family: 'SuperDuperComicSans'; 都沒問題，但或許不適用於您的信譽。在 src 屬性中，我們會指向瀏覽器可以找到字型素材資源的位置。視瀏覽器而定，部分有效的字型類型包括 eot、ttf、otf、svg，或內嵌完整字型資料的資料 URI。

	OTF 與 ttf	svg	woff	OOt
IE	IE9		IE9	IE5 以上
Firefox	FF3.5	FF3.5	FF3.6
Chrome	Google 瀏覽器 4	Chrome 0.3	Chrome 5
Safari	3.1	3.1
歌劇	Opera 10.00 版本	歌劇院 9
iOS		iOS 1
Android	2.2

當然，任何事情都不像平常那麼簡單。上述程式碼的初始限制是，其沒有向 IE 6-8 提供 EOT。根據 bulletproof @font-face 語法提出的解決方法；完善的版本如下。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('&#9786;'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

還沒開始造成頭痛嗎？如果您只是想快速瞭解該項內容，不妨使用 Font Squirrel generator 這款工具簡化整個過程，為你簡化整個字型流程，並為你準備變體和 CSS。而現在對網站字型來說是不可或缺的要務。

行動支援？

自 iOS 3.1 版起，行動版 Safari 支援 SVG 網路字型，而 Android 自 2.2 版起支援 otf/ttf。但應該為行動裝置使用者提供更出色的字體排版體驗嗎？我不建議這麼做。主要原因是 WebKit 處理等待透過 @font-face 自訂字型的文字：文字是隱藏的。因此，在低頻寬行動網路連線下，使用者必須等到約 5 萬個字型資料載入後，才能看到任何文字。Webkit 團隊正在設法解決在幾秒後開啟備用字型的功能，但直到到達這個字型為止，對使用者和內容之間出現這類障礙，我才認為合理。

網路字型服務

有些服務會將 @font-face 功能包裝在簡單的 API 中。通常您可以將一個 CSS 或指令碼行加入 HTML 和某些設定，這樣就大功告成了。WebInk、Typekit 和 Fontslive 等許多工具都會讓您額外設定月費的字型 (有時上限為頻寬上限)。對休閒的開發人員來說，使用這些服務是非常方便的工具，這樣可以說明提供跨瀏覽器解決方案的一些複雜之處

Google Font API 可讓您使用一組精選的自由授權字型，只要連結至樣式表，讓 Google 處理跨瀏覽器和效能方面的疑慮。採用網頁字型，是最快開始跑步的最佳方式。

尋找 @font-face 專業字體

設計人員常會發現，只是因為您購買了字型授權 (例如用於平面設計)，並不代表可以在 @font-face 中使用。@font-face (或網頁嵌入) 的授權通常另售。請詳閱協議內容。如有任何疑問，歡迎隨時與字型庫聯絡。 Fontspring 是一家字型精品店，販售數百種優質的專業字型，且全都已清除，可搭配 @font-face 使用。FontFont 及其他創始公司已開始直接販售 @font-face 授權，但目前僅適用於 WOFF 和 EOT，因此瀏覽器市場中仍有龐大 (但縮小) 部分。許多機構會將網路字型授權加入目錄，但如果找不到可選字體的字型，請聯絡供應商詢問。

處理 FOUT

Flash of Unstyled Text 是 Firefox 和 Opera 中的一種現象，讓少數網頁設計人員愛不釋手。透過 @font-face 套用自訂字體時，系統有時會短暫地在載入網頁時下載並套用字型，並使用 font-family 堆疊中的下一個字型。如此一來，它在升級前會閃爍顯示另一個 (通常不太美觀的字型) 字型。

Google Font API 隨附的是 WebFont API，這是一個專門用來提供事件掛鉤的 JavaScript 程式庫，可讓您大量控制載入作業。讓我們來看看如何利用其他瀏覽器模擬 WebKit 在載入 @font-face 字型時隱藏備用文字的行為。

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

停用 JavaScript 之後，該文字會全程顯示，但如果字型發生錯誤，則會安全回復為基本的 Serif 。這目前是一個權宜之計，因為大多數的網頁字型專家都希望隱藏備用文字 2 到 5 秒，然後才顯示。在這個逾時情況下，低頻寬和行動裝置的功用是顯著優勢。可以的話，Mozilla 是希望盡快修正。

font-size-adjust 屬性是較輕量但效果較低的解決方案，目前僅支援 Firefox。讓您有機會將字型堆疊的 x-height 正規化，減少 FOUT 的明顯變化。事實上，Font Squirrel generator 也加入了一項功能，指出所上傳字型的 x 高度比例，因此您可以準確設定 font-size-adjust 值。

摘要

Webfonts 向設計人員提供相當大的自由，而即將推出獨立配音和個人風格替代內容等功能，屆時將大幅增加彈性。這個部分涵蓋 98% 的已部署瀏覽器，您可以放心導入其中的 CSS3。歡迎繼續觀看影片！