翻譯自webkit.org
在網(wǎng)站里自定義網(wǎng)頁字體以及變得越來越流行。通過使用自己站點(diǎn)的資源，開發(fā)者以及可以使用特殊的字體。瀏覽器會在字體加載完成時(shí)使用它們，但不幸的并不是所有的字體都可以瞬間下載完成，這意味著字體的下載過程中瀏覽器已經(jīng)顯示了頁面。大部分字體體積都有一點(diǎn)大，瀏覽器使用它們時(shí)會有一個(gè)延遲。WebKit用兩個(gè)方式改善了這個(gè)問題：改善了字體下載策略，使字體下載更快。
默認(rèn)字體下載策略
瀏覽器嘗試用最快得方式顯示頁面，可能盡管字體正在下載還不能使用。WebKit總是會在字體下載完成后顯示它們，使用這些字體時(shí)，WebKit在下載延遲的過程中仍然顯示文字元素。但老版本的WebKit會在字體下載完成前不顯示這些文字。相應(yīng)的，新版本的WebKit會保留最大3秒的文字隱藏時(shí)間，之后會使用本地字體顯示文字，直到字體下載完成時(shí)會被新的字體替換顯示。
此處有視頻 請閱讀原文觀看
得幸于文字快速下載，這個(gè)新的策略使降級兼容(fallback)文字最小的閃現(xiàn)，避免了不確定得長時(shí)下載造成的模糊。最棒的地方是頁面不需要做任何改進(jìn)來使用這個(gè)新代理，所有的字體下載講被設(shè)置成默認(rèn)。
CSS字體加載API
不同的網(wǎng)頁開發(fā)者可能希望使用不同的策略，來改變標(biāo)題字體或者全局字體。在新的WebKit中CSS font loading API使開發(fā)者可以徹底控制字體加載策略。
這個(gè)API暴露了兩個(gè)主要的JS片段：FontFace接口和FontFaceSet接口。
FontFace和CSS @font-face的規(guī)則一樣，所以它包含了字體的url、weight、unicode-range、family等。而FontFaceSet包含了網(wǎng)頁所有的字體是否可以被渲染。所有的document都有自己的FontFaceSet，可以在document.fonts中查看。
使用這些對象去實(shí)行一個(gè)特別的字體加載策略變得十分直接，一旦FontFace被構(gòu)造，load()方法就開始異步下載字體數(shù)據(jù)。當(dāng)下載成功或因失敗而時(shí)它會返回了一個(gè)Promise。用過鏈?zhǔn)秸{(diào)用返回的promise，JS就可以處理它了。因此一個(gè)網(wǎng)站可以實(shí)行這樣的策略：在不超時(shí)的情況下立即使用降級兼容字體。
<div id="target" style="font-family: MyFallbackFont;">hamburgefonstiv</div>
let fontFace = new FontFace("MyWebFont", "url('MyWebFont.woff2') format('woff2'),
url('MyWebFont.woff') format('woff')");
fontFace.load().then(function(loadedFontFace) {
document.fonts.add(loadedFontFace);
document.getElementById("target").style.fontFamily = "MyWebFont";
});
在這個(gè)例子里，元素樣式聲明使用了MyFallbackFont，然后JS運(yùn)行并開始請求MyWebFont。如果文字加載成功，新加載的字體被添加進(jìn)document的FontFaceSet中并且元素的樣式也被新的字體所取代。
WOFF2
不用擔(dān)心哪些字體不能使用加載策略，字體加載飛快時(shí)，用戶的體驗(yàn)將會很好。在macOS Sierra、iOS 10、GTK中WebKit已經(jīng)支持一個(gè)全新的、體積更小的字體格式“WOFF 2”。新的壓縮算法Brotli使這個(gè)字體體積更小，這使得WOFF 2字體可以更加快速的被下載，要比WOFF、OpenType、TrueType還快。WebKit也承認(rèn)CSS@font-face中scr屬性里format("woff2")的標(biāo)識。因?yàn)槟壳安皇撬械臑g覽器都支持WOFF 2，所以請優(yōu)雅降級兼容其他的格式。
@font-face {
font-family: MyWebFont;
src: url("MyWebFont.woff2") format("woff2"),
url("MyWebFont.woff") format("woff");
}
這個(gè)例子里，瀏覽器會選擇它們所能支持的字體格式。因?yàn)闉g覽器優(yōu)先加載列表中考前的字體，所以如果瀏覽器支持WOFF 2，它會被優(yōu)先加載。
unicode-range
流量是十分珍貴的資源（尤其是在移動(dòng)設(shè)備上），所以最小化或排除沒用字體變得極其有價(jià)值。WebKit現(xiàn)在支持unicode-rangeCSS屬性。
@font-face {
font-family: MyWebFont;
src: url("MyWebFont-extended.woff2") format("woff2"),
url("MyWebFont-extended.woff") format("woff");
unicode-range: U+110-24F;
}
@font-face {
font-family: MyWebFont;
src: url("MyWebFont.woff2") format("woff2"),
url("MyWebFont.woff") format("woff");
unicode-range: U+0-FF;
}
<div style="font-family: MyWebFont;">hamburgefonstiv</div>
在這個(gè)例子里，沒有一個(gè)字符屬于MyWebFont中第一個(gè)CSS@font-face規(guī)定的unicode-range中，這意味著沒有下載第一個(gè)@font-face中得任何字體。有一點(diǎn)很重要，最后一個(gè)@font-face會被下載。因此最通用的CSS@font-face規(guī)則應(yīng)該放在列表的最后。使用unicode-range去分割字體可以避免下載全部的字體，讓你拯救用戶的流量和電量。
