web font loading recipes
1.0.0
一堆演示，用於不同的Web字體加載策略。其中一些包含在字體加載策略的綜合指南中，其中一些是實驗性的。
演示可在https://www.zachleat.com/web-fonts/demos/
由於Web字體是一種漸進式增強功能，並且隨著對CSS字體加載API的支持，我們可以期待一個時間，即我們不需要將polyfill嵌入到標題中（甚至更快的字體加載）。簡化的CSS字體加載API配方是默認的，但是包含多填充的版本以進行更廣泛的瀏覽器支持 - 尤其是只有多填充版本才能在Internet Explorer和Edge Web瀏覽器中顯示Web字體（它們對CSS字體對CSS Font loading API沒有支持）。
font-display: swap@font-face描述符preload<link>標籤font-display: swap與preload交換<link>標籤和CSS ： @font-face描述符font-display和preload信息與上述類似，但不使用類，僅使用CSS字體加載API。這不需要對CSS進行任何修改，而需要使用JS編程為Web字體注入Web字體。我首先在@Bramstein的WebFont手冊中看到了此方法。
.style.fontFamily方法（僅適用於每個家庭的一個家庭），首先在@simevidas的推文中看到了這一點在第一階段使用一個羅馬字體文件（帶有字體合成），兩個階段負載。
preload的關鍵foft<link>標籤和javaScript ：CSS字體加載APIfont-display: optional 。preload關鍵foft，帶有多填充後備模擬font-display: optional<link>標籤和JavaScript ：CSS字體加載API和FontfaceObserver Polyfill這些不一定是字體加載策略，但它們是您可以在上面放置並與現有策略配對的額外增強功能。
選擇在慢速連接速度上退出Web字體。
prefers-reduced-motion用戶偏好當用戶啟用時，請選擇退出字體， Reduce Motion可訪問性偏好。
save-data用戶偏好當用戶啟用Data Saver模式時，請選擇退出字體。
在某個時候，您可能會看到有關這些文章的博客文章。
font-display: optional來吧。 ？
舊的瀏覽器曾經無需超時就可以渲染FOIT，實際上，Web字體使單個失敗。使用WOFF2僅將芥末切成現代瀏覽器，這些瀏覽器具有三秒鐘的Web字體超時。我們在這裡具有反觸覺文字，但是這種方法值得一提。
font-synthesis不是一個很好的終產物。
<style>注射任何使用JavaScript向內部帶有@font-face塊的新型<style>東西。真的很糟糕的重新粉刷成本 - 避免這種情況。這是在上面的異步數據URI方法中使用的，但在表現較差的方法中也很常見。
font-display: optional和preloadfont-display: optional preload ：可選是反模式font-display （在font-family中混合font-display值）此方法當前沒有跨瀏覽器支持。我希望這會改變 - 更多。
swap / 3個optional ） 人們嘗試這是一件常見的事情 - 它們異步加載了CSS（僅CSS）。哎呀，在開始研究Web字體加載之前，我使用了這種行為。
@supports和font-displayfont-display則可能只使用Web字體font-display則可能很高興能與fout一起參加課程（並且沒有JS依賴項，可以很好地工作）@supports與字體臉部描述符無法使用。font-family堆棧將兩個或多個font-family網絡字體放入一個font-family堆棧中。
失敗：匹配算法的字體匹配選擇了與加載並嘗試加載它的第一個Web字體（忽略後續的Web字體系列）。即使您preload子集的第一階段，它也會因font-family訂單的優先級而交換。
代碼
演示
更新：雖然您可以通過font-display來減輕上述問題，也許可以修改font-family堆棧和@font-face塊排序的順序，但在加載較大版本後，從頁面上刪除不必要的子集字體仍然存在問題。穿越這些字體文件邊界的字形出現的字體功能將被打破（kerning，segatures等）。相關地，您不能使用CSS字體加載API刪除CSS對面的FontFace對象（根據規範）。
**請注意，這些方法將利用其默認字體加載行為來在Internet Explorer和Edge中進行拋棄。
