---
title: Web Font Loader 不負責任 中文翻譯版
description: （本來是開放任編輯，但是被加了奇怪的東西）
robots: index,follow,noarchive
langs: zh-TW
dir: ltr
---
###### tags: `doc` `translate`
不負責任翻譯自: [typekit/webfontloader](https://github.com/typekit/webfontloader/blob/master/README.md)
---
# Web Font Loader 網頁字體裝載機
Web Font Loader 讓你在透過 `@font-face` 使用鏈接字體過程，增加了可控制的能力。
它提供了共同的 "介面（機制）" 來下載字型，可以不用管來源是何處。
它提供了標準組合的事件 events，你可以用它來控制下載過程的體驗。
Web Font Loader 可以下載字型來自： [Google Fonts](http://www.google.com/fonts/), [Typekit](http://www.typekit.com/), [Fonts.com](http://www.fonts.com/), 和 [Fontdeck](http://fontdeck.com/), 以及自己伺服器的網路字型.
*// 編按：Web Font Loader 是一段 Javascript 程式碼，下面是介紹和說明幾種使用的方式*
它是 [Google](http://www.google.com/) 和 [Typekit](http://www.typekit.com) 共同研發的.
[](https://travis-ci.org/typekit/webfontloader)
## Contents
* [Get started 開始](#get-started)
* [Configuration 配置](#configuration)
* [Events 事件](#events)
* [Timeout 暫停](#timeouts)
* [Iframes](#iframes)
* [Modules 模組](#modules) (不同字體來源供應商的使用方式)
* [Adobe Edge Web Fonts](#adobe-edge-web-fonts)
* [Custom 客製](#custom)
* [Fontdeck](#fontdeck)
* [Fonts.com](#fontscom)
* [Google](#google)
* [Typekit](#typekit)
* [Browser support 瀏覽器支援](#browser-support)
* [License 版權](#copyright-and-license)
## Get Started
使用 Web Font Loader library, 只要引入 (include) 它到你的頁面，並且告訴他要下載哪些字型。
舉例，你可以 **使用 Web Font Loader 從 "[Google Fonts](http://www.google.com/fonts/)" 下載字型**，Web Font Loader 託管在 [Google Hosted Libraries](https://developers.google.com/speed/libraries/).
*// 編按：中文還需要手動引入 `@fonts-face` ，可能是還是 earlyaccess 的關係*
用以下編碼：
```htmlmixed=ml
<!-- 引入 Web Font Loader library -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<!-- 設定 -->
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>
```
另外, 你可以連結到最新 Web Font Loader `1.x` 版本，使用 `https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js` 作為 `script` 來源。
注意，那版本號不是具體的編號，他將下載最新 `1.x` 的版本，但它緩存留的時間也較短，以確保得到最新更新。
出於性能的考慮，我們建議在生產中使用網頁字體加載器使用時，在 URL 中明確版本號 (如 `1.6.16`)。
當你想採取一個新的版本，你可以在 URL 中，手動更新 Web Font Loader 版本號。
Web Font Loader 也可使用 CDN, 在 [jsDelivr](http://www.jsdelivr.com/projects/webfontloader) & [CDNJS](https://cdnjs.com/libraries/webfont).
Web Font Loader 可以使用異步加載。
例如，異步加載 [Typekit](http://www.typekit.com) 字體，可以使用下面的代碼：
```htmlmixed=
<script>
// 設定
WebFontConfig = {
typekit: { id: 'xxxxxx' }
};
//異步加載的語法
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
```
異步加載可避免加載 JavaScript 時塞車。
要注意，若使用異步加載的程式碼，頁面上其他部分，也許會在 Web Font Loader 下載前先渲染並執行。
這將導致一個"無樣式文字的快速閃過" [Flash of Unstyled Text (FOUT)](http://help.typekit.com/customer/portal/articles/6852).
FOUT 可以很輕易地避免，當異步加載 Web Font Loader, 只要 `Webfont.load` 被調用，Web Font Loader 將自動設定 `wf-loading` class 在 HTML element `<html>`.
瀏覽器將等待程式碼去下載，在繼續下載剩下的內容之前，可避免 FOUT。
Web Font Loader 也作為一個 CommonJS module，在 npm 供下載。
只要 `npm install webfontloader` 並且在你的程式碼中 require.
```jsx=
var WebFont = require('webfontloader');
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
```
## Configuration 配置
Web Font Loader 的配置，是定義在一個全域的變數叫做 `WebFontConfig`,
或直接傳遞給 `WebFont.load` 方法。
它定義哪些字體從哪些供應源下載，使您可以為某些事件做指定的 callbacks 的選項。
當使用異步的方式，你必須在程式碼下載 Web Font Loader 之前，定義全域的變數 `WebFontConfig` (如上面範例).
### Events
Web Font Loader 提供一個事件系統，方便開發人員銜接。
它提供字體下載的過程順序通知，CSS 和 JS 都有。
* `loading` - 當所有字體都被請求，event 被觸發。
* `active` - 有字體被渲染時，event 被觸發。
* `inactive` - 瀏覽器不支援連結的字體 *或* 沒有字體可被下載，event 被觸發。
* `fontloading` - 有字體被下載成功，event 被觸發一次。
* `fontactive` - 有字體被渲染，event 被觸發一次。
* `fontinactive` - 有字體不能下載時，event 被觸發。
CSS event 以 classes 作用在 `html` 元素上的方式被實現。以下 classes 將被設定在 `html`:
```css
.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive
```
`<familyname>` 為：每一個 font family 的名稱的 "清潔版本 (sanitized version)"：字體名稱中的 "空格" 和 "下底線" 將被移除、所有字符小寫。例如， `Droid Sans` 變成 `droidsans`.
`<fvd>` 為：[字體變異描述 Font Variation Description](https://github.com/typekit/fvd).
簡單地說，它是描述"特定字體的樣式和重量"的簡寫。下面是幾個例子：
```css
/* n4 */
@font-face { font-style: normal; font-weight: normal; }
/* i7 */
@font-face { font-style: italic; font-weight: bold; }
```
記住 `font-weight: normal` 對應為 `font-weight: 400`,
並且 `font-weight: bold` 對應為 `font-weight: 700`.
無指定，皆為 `n4` (`font-style: normal; font-weight: normal;`)。
若在一個單一頁面中，字體下載很多次，CSS 不斷更新以反映網頁的當前狀態，
只要字體被請求，全域的 `wf-loading` class 就被應用（即使其他字體已經有效或無效）；
只有在頁面上沒有字體被渲染時 `wf-inactive` class 會被應用；
除此之外 `wf-active` class 會被應用（即使一些字體是無效的）。
JavaScript events 做為 `WebFontConfig` 配置物件的回調函數 (callback functions).
```javascript
WebFontConfig = {
loading: function() {},
active: function() {},
inactive: function() {},
fontloading: function(familyName, fvd) {},
fontactive: function(familyName, fvd) {},
fontinactive: function(familyName, fvd) {}
};
```
`fontloading`, `fontactive` 和 `fontinactive` 回調函數會傳遞關注事件的字體的 "family name" 和 "變化描述"。
要禁用 HTML 元素上的設置 classes，可將設定配置參數`classes` 為 `false` (預設為 `true`)。
```javascript
WebFontConfig = {
classes: false
};
```
你也可以取消 font events (callbacks) 透過設定 `events` 參數為 `false` (預設為 `true`).
```javascript
WebFontConfig = {
events: false
};
```
若 events 和 classes 都不使用，Web Font Loader 則不監控字體，僅作為插入 `@font-face` 的方式。
### Timeouts
因為網路不是 100% 可靠, 有可能字體無法加載。
若字體無法呈現 `fontinactive` event 將在五秒後將被觸發。
若 *至少* 一個字體成功呈現，`active` event 將被觸發, 否則 `inactive` event 將被觸發。
你可以改變預設的觸發時間，從 `WebFontConfig` object 的 `timeout` 選項.
```javascript
WebFontConfig = {
google: {
families: ['Droid Sans']
},
timeout: 2000 // 設定 timeout 為 2 秒
};
```
timeout value 應為毫秒，若未設定，預設為 3000 milliseconds（ 3 秒)。
### Iframes
通常，這是最簡單的方法：在每個 需要字體的 window（頁面）引入一個 Web Font Loader 副本，使每個 window 管理自己的字體。
然而，如果您需要單個窗口管理多個同源子窗口、或使用 JavaScript 構建的 iframe 的字體，Web Font Loader 一樣可以支援。
使用選用的 `context` 選項，並給一個到目標窗口的 reference（路徑）來供 loading。
```javascript
WebFontConfig = {
google: {
families: ['Droid Sans']
},
context: frames['my-child']
};
```
這是一個進階的配置選項，多數情況不需要。
## Modules 模組
Web Font Loader 提供一個模組系統，任何 web font 的供應商都可以提供代碼來允許他們的字體被下載。
可以在同一時間，使用多個 web fonts 供應方。
目前 library 支援的每個供應商的具體細節都記錄在這。
### Adobe Edge Web Fonts
當使用 [Adobe Edge Web Fonts](https://edgewebfonts.adobe.com/),
你可以用 `typekit` module。
參數 `id` 傳遞字體的列表鏈，
設定參數 `api` 為 Edge Web Fonts URL (字體位置)。
```javascript
WebFontConfig = {
typekit: {
id: 'adamina;advent-pro',
api: '//use.edgefonts.net'
}
};
```
### Custom 客製
從任何外部樣式表下載字體，請使用 `custom` 模組。
這裡你需要指定你要下載的 font family name，
且可選的 url 選項，即提供字體 `@font-face` 聲明的樣式表的 url。
你可以指定特定的字體 "變體"（特定字體的樣式和重量），或一組變體來下載並監控，
透過加 `,` 來分隔 "變體"，附加 `:` 分隔 "family name"。
變體使用 [FVD notation (標記法)](https://github.com/typekit/fvd).
```javascript
WebFontConfig = {
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
}
};
```
在這個 Custom 例子中，`fonts.css` 檔案看起來像這樣：
```css
@font-face {
font-family: 'My Font';
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: normal;
font-weight: normal; /* or 400 */
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: italic;
font-weight: normal; /* or 400 */
src: ...;
}
@font-face {
font-family: 'My Other Font';
font-style: normal;
font-weight: bold; /* or 700 */
src: ...;
}
```
若你的字體已經包含在其他樣式表中，你可以不管 `urls` array，只指定字體名稱 (font family names) 來加載字體。
直到名稱對應了那些 `families` array 中聲明的字體，正確的 loading classes 將被應用在 html 元素。
```html
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['My Font']
}
});
</script>
<style type="text/css">
@font-face {
font-family:"My Font";
src:url("assets/fonts/my_font.woff") format("woff");
}
</style>
```
Custom 模組也支援定義一個用來確定 "是否一個字體已被下載" 的 "測試字符串"。
這可以用來加載一個，在私有使用的 Unicode 區段中，有自定義的子集或字形的字體。
```javascript
WebFontConfig = {
custom: {
families: ['My Font'],
testStrings: {
'My Font': '\uE003\uE005'
}
}
};
```
測試字符串應以每個字體為基礎指定，並至少包含一個字符。
若沒有指定，預設測試字串為 (`BESbswy`). *[^ *^BESbswy?](https://tomjn.com/2012/09/13/typekit-besbswy/)*
### Fontdeck
使用 [Fontdeck](http://fontdeck.com/) module,
具體指定你網站的 ID，你可以在你的帳戶設定 (account settings) 頁面中找到你的 ID。
```javascript
WebFontConfig = {
fontdeck: {
id: 'xxxxx'
}
};
```
### Fonts.com
當使用 [Fonts.com web fonts](http://www.fonts.com/web-fonts/)，指定你的 Project ID.
```javascript
WebFontConfig = {
monotype: {
projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
version: 12345, //（可選，刷新 CDN 緩存）
loadAllFonts: true // （可選，加載 Project 所有的字體）
}
};
```
Fonts.com module 有一個可選的 `version` 選項。
他行為像一個緩存破壞程序 *([^ *^cache-buster](http://www.adopsinsider.com/ad-ops-basics/what-is-a-cache-buster-and-how-does-it-work/))*，
選用的 `loadAllFonts` 會加載 Project 所有的字體.
預設 Fonts.com module 只會加載頁面有使用的字體。
### Google
使用 [Google's Font API](https://code.google.com/apis/webfonts/docs/getting_started.html),
填寫你要下載的 font families。
你可以使用一樣的 [syntax (語法)](https://developers.google.com/fonts/docs/getting_started#Syntax)，如 Font API 中相同的語法來指定樣式。
請注意 Google module 不支援 FVD syntax，那是 Custom module 中使用的。
```javascript
WebFontConfig = {
google: {
families: ['Droid Sans', 'Droid Serif:bold'] // 不是 FVD
}
};
```
有時候你要求的字體，不是以預設的字重過來 (e.g. 400)，
你需要明確地要求你的字體變量，使 font events 運作 (e.g. `300`, `700`, etc.):
```javascript
WebFontConfig = {
google: {
families: ['Open Sans Condensed:300,700']
}
};
```
若你需要在默認值之外指定字符子集 (e.g.: 希臘文以外的拉丁編碼)，
您必須在冒號後，追加子字符串到請求的字符串。
子集字串應該遵循 [Google documentation](https://developers.google.com/fonts/docs/getting_started#Subsets) (子集名稱用冒號 `:` 分開):
```javascript
WebFontConfig = {
google: {
families: ['Open Sans Condensed:300,700:latin,greek']
}
};
```
你也可提供 `text` 參數來執行字符子集:
```javascript
WebFontConfig = {
google: {
families: ['Droid Sans', 'Droid Serif'],
text: 'abcdefghijklmnopqrstuvwxyz!'
}
};
```
`text` 子集功能只有 Google module 有提供。
### Typekit
當使用 [Typekit](http://www.typekit.com),
指定套件 (kit) 由它的 ID 來檢索。你可以找到 Kit ID 在 Typekit's Kit Editor 介面中.
```javascript
WebFontConfig = {
typekit: {
id: 'xxxxxx'
}
};
```
**FYI:**
Typekit's 自己的 JS 是使用 Web Font Loader library 建造，
已經提供了所有相同的字體事件的功能。
若你使用 Typekit, 你應該直接使用他們的 embed codes，
除非在同個頁面，你也需要下載其他供應源的網路字體。
## Browser Support 瀏覽器支援
每個網頁瀏覽器對對於透過 `@font-face` 連結的字體有不同程度的支援。
Web Font Loader 確定支援網路字體是使用瀏覽器的使用者代理串。
使用者代理串可能聲稱有支援一個網路字體格式，但實際沒有。
這尤其值得注意在手機瀏覽器使用桌機模式的時候，通常認定在 Linux 的 Chrome.
在這種情況，一個網路字體供應商可能決定傳送 WOFF 字體給這個裝置，因為實際桌機版的 Chrome 支援它，當手機瀏覽器不支援的時候。
Web Font Loader 不是設計來處理這些狀況，而且他預設是相信使用者代理串所聲明的。
網路字體供應商可以在 Web Font Loader 的基礎上，建立功能去逐個處理這些特殊情況。
若 Web Font Loader 確認當前的瀏覽器不支援 `@font-face`, `inactive` event 將被觸發。
當下載字體來自多個供應商，不一定每個供應商有支援該瀏覽器。
若 Web Font Loader 確認當前瀏覽器可以支援 `@font-face`， 且最少一個供應商是能提供字體，來自該供應商的字體將被下載。
當結束，`active` event 將被觸發。
對於下載來自"可支持的供應商"的字體，`fontactive` event 將被觸發.
對於下載來自"供應商他 *沒有* 支援當前瀏覽器" 的字體，`fontinactive` event 將被觸發。
舉例：
```javascript
WebFontConfig = {
providerA: 'Family1',
providerB: 'Family2'
};
```
若 `providerA` 可以提供這個字體到一個瀏覽器，但 `providerB` 不行,
`fontinactive` event 將針對 `Family2` 被觸發。
`fontactive` event 將針對 `Family1` 從他下載開始被觸發，如同 `active` event.
## Copyright and License 版權與許可
Web Font Loader 版權所有 (c) 2010 Adobe Systems Incorporated, Google Incorporated.。
Apache 許可證下許可，2.0版（以下簡稱“許可證”；除非遵守許可，你可能不能使用這個文件。您可以獲得許可證的副本在
```
http://www.apache.org/licenses/LICENSE-2.0
```
除非適用法律要求或書面同意，根據許可證分發的軟件是基於 "AS IS" BASIS, 沒有任何形式的擔保或條件，無論是明示或暗示。請參閱特定語言的管理權限許可，並根據許可證的限制。
Sign in with Wallet
Connect another wallet