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中进行抛弃。
