翻譯自webkit.org
在網(wǎng)站里自定義網(wǎng)頁字體以及變得越來越流行。通過使用自己站點的資源疮鲫，開發(fā)者以及可以使用特殊的字體吆你。瀏覽器會在字體加載完成時使用它們，但不幸的并不是所有的字體都可以瞬間下載完成俊犯，這意味著字體的下載過程中瀏覽器已經(jīng)顯示了頁面妇多。大部分字體體積都有一點大，瀏覽器使用它們時會有一個延遲燕侠。WebKit用兩個方式改善了這個問題：改善了字體下載策略者祖，使字體下載更快。
默認(rèn)字體下載策略
瀏覽器嘗試用最快得方式顯示頁面绢彤，可能盡管字體正在下載還不能使用七问。WebKit總是會在字體下載完成后顯示它們，使用這些字體時茫舶，WebKit在下載延遲的過程中仍然顯示文字元素械巡。但老版本的WebKit會在字體下載完成前不顯示這些文字。相應(yīng)的，新版本的WebKit會保留最大3秒的文字隱藏時間讥耗，之后會使用本地字體顯示文字有勾，直到字體下載完成時會被新的字體替換顯示。
此處有視頻 請閱讀原文觀看
得幸于文字快速下載古程，這個新的策略使降級兼容(fallback)文字最小的閃現(xiàn)蔼卡，避免了不確定得長時下載造成的模糊。最棒的地方是頁面不需要做任何改進(jìn)來使用這個新代理挣磨，所有的字體下載講被設(shè)置成默認(rèn)雇逞。
CSS字體加載API
不同的網(wǎng)頁開發(fā)者可能希望使用不同的策略，來改變標(biāo)題字體或者全局字體趋急。在新的WebKit中CSS font loading API使開發(fā)者可以徹底控制字體加載策略喝峦。
這個API暴露了兩個主要的JS片段：FontFace接口和FontFaceSet接口。
FontFace和CSS @font-face的規(guī)則一樣呜达，所以它包含了字體的url谣蠢、weight、unicode-range查近、family等眉踱。而FontFaceSet包含了網(wǎng)頁所有的字體是否可以被渲染。所有的document都有自己的FontFaceSet霜威，可以在document.fonts中查看谈喳。
使用這些對象去實行一個特別的字體加載策略變得十分直接，一旦FontFace被構(gòu)造戈泼，load()方法就開始異步下載字體數(shù)據(jù)婿禽。當(dāng)下載成功或因失敗而時它會返回了一個Promise。用過鏈?zhǔn)秸{(diào)用返回的promise大猛，JS就可以處理它了扭倾。因此一個網(wǎng)站可以實行這樣的策略：在不超時的情況下立即使用降級兼容字體。
<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";
});
在這個例子里挽绩，元素樣式聲明使用了MyFallbackFont膛壹，然后JS運行并開始請求MyWebFont。如果文字加載成功唉堪，新加載的字體被添加進(jìn)document的FontFaceSet中并且元素的樣式也被新的字體所取代模聋。
WOFF2
不用擔(dān)心哪些字體不能使用加載策略，字體加載飛快時唠亚，用戶的體驗將會很好链方。在macOS Sierra、iOS 10灶搜、GTK中WebKit已經(jīng)支持一個全新的侄柔、體積更小的字體格式“WOFF 2”共啃。新的壓縮算法Brotli使這個字體體積更小，這使得WOFF 2字體可以更加快速的被下載暂题，要比WOFF、OpenType究珊、TrueType還快薪者。WebKit也承認(rèn)CSS@font-face中scr屬性里format("woff2")的標(biāo)識。因為目前不是所有的瀏覽器都支持WOFF 2剿涮，所以請優(yōu)雅降級兼容其他的格式言津。
@font-face {
font-family: MyWebFont;
src: url("MyWebFont.woff2") format("woff2"),
url("MyWebFont.woff") format("woff");
}
這個例子里，瀏覽器會選擇它們所能支持的字體格式取试。因為瀏覽器優(yōu)先加載列表中考前的字體悬槽，所以如果瀏覽器支持WOFF 2，它會被優(yōu)先加載瞬浓。
unicode-range
流量是十分珍貴的資源（尤其是在移動設(shè)備上）初婆，所以最小化或排除沒用字體變得極其有價值。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>
在這個例子里磅叛，沒有一個字符屬于MyWebFont中第一個CSS@font-face規(guī)定的unicode-range中，這意味著沒有下載第一個@font-face中得任何字體萨赁。有一點很重要弊琴，最后一個@font-face會被下載。因此最通用的CSS@font-face規(guī)則應(yīng)該放在列表的最后杖爽。使用unicode-range去分割字體可以避免下載全部的字體敲董，讓你拯救用戶的流量和電量。
