如果你对于CSS技巧没有深入地了解，这篇文章会让你知道一些控制字体加载的技巧。
CSS的字体显示属性在Blink-based浏览器中可以被使用。它使你能够发现浏览器的功能，如：字体加载API，以及第三方脚本，如Bram Stein's Font Face Observer。
下面，先讨论一下浏览器中的默认字体加载行为。
浏览器中的字体加载
浏览器是精心制作的程序。字体加载也是这样，当浏览器加载一个字体时，所使用字体的文本样式是隐藏的，直到字体被加载出来为止。这个现象被称为“Flash of Invisible Text”或FOIT。
这个加载行为可以使你看到无样式文本，但它会对连接速度慢的用户产生影响。在默认情况下，大多数浏览器会隐藏文本长达三秒，直到在等待字体加载时显示回退文本。其他浏览器，会等待更长的时间如Safari，甚至是无限期的，使一些用户的文本不显示。
目前缓解这个问题的方法是使用一个基于JS的解决方案在字体加载时进行跟踪，如字体观测器。首先使用系统字体样式文档，当检测到自定义字体通过JS加载时，添加一个CSS类，然后应用自定义字体。例如，假设你有一个页面，对所有的<p>标签使用Open Sans Regular，默认情况下，指定这个规则：
作为字体加载，无论是Arial或Helvetica都将显示（取决于你的系统上可用的字体）。当证实了Open Sans Regular使用JS加载后，应用类的字体加载到<html>标签，通过CSS的<p>标签，将适用于Open Sans：
这些解决方案实施起来非常繁琐，这就是新的字体显示CSS属性的用武之地。
熟悉字体显示
字体显示是一个新的CSS属性，可作为实验性功能，在Chrome 49先运行，现在可以在Opera和Android版Opera运行。使用它，可以控制如何用和JS为基础的解决方案大致相同的方式显示字体，只是现在通过一个方便的CSS one-liner去做到这一点。
字体显示内部的@font-face声明可用于你的自定义字体。此属性接受多个值：
自动：默认值。典型的浏览器的字体加载行为会发生，会隐藏字体，使用自定义字体，然后当字体加载完成时显示受影响的文本。
swap：回退文本立即显示，直到自定义字体加载。在大多数情况下，这是被希望的。JS驱动加载字体解决方案几乎都效仿此设置。
回退：这是自动排序和互换之间的妥协。将会有一个短时间内使用自定义字体样式的文本会看不见（谷歌100毫秒）。然后，无样式的文本将出现（如果已经加载自定义字体就不会这样）。一旦加载字体，文本样式会正确。
可选：运行和回退完全一样，会在最初不可见的一个短时间内影响的文本，然后过渡到回退字体。相似之处到此为止。可选设置让浏览器决定是否一个字体应该被使用，这种行为取决于用户的连接速度。可以预计的是，在低速连接下，如果使用该设置自定义字体可能无法加载。
@ font-face规则。这里有一个在@ font-face声明使用swap value的例子：
WOFF2文件。在这种情况下，使用字体显示swap选择，这产生了一个像下图这样的加载方式：
JS中控制字体加载。要确保文本默认为可见，然后应用已被下载的自定义字体。
Open Sans Regular，系统的字体是Helvetica和Arial。当字体显示：swap是使用的，最初的字体的显示是第一个系统字体的字体堆栈。当自定义字体加载时，它取代最初显示的系统字体。在决定如何处理自定义字体之前使用回退的其他字体显示值和可选依靠堆栈中的系统字体回退。
swap。它不仅提供了一个最佳平衡自定义字体和可访问性的内容，它还提供了和依赖JS相同的字体加载行为。如果在页面上有你想加载的字体，但最终可能没有，可以考虑使用字体显示时回退或可选。
你可以只用字体显示。如果其他浏览器不支持的话，它们不会得到字体显示所带来的好处。这并不一定是坏事，它不会破坏任何东西，但它可能使non-Blink浏览器被用户冷落。
你可以检测字体显示的支持，并提供另一种选择。如果时间和资源允许，你应该这么做。
Firefox，Chrome和Opera可用的本地字体加载API：
API处理过渡。一旦API知道字体加载，可以应用类将字体加载到<html>标签。通过这个类，可以编写CSS，允许自定义字体的逐步应用：
CSS one-liner如字体显示去做所有的这些东西会更好，如果需要的话，至少可以有能力回落到另一种解决方案。随着时间的前进，可以预期，这一解决方案如字体加载API，将在其他浏览器应用。
TypeKit第三方服务的嵌入字体，那就没什么可以做的。字体显示属性必须在@ font-face声明的内部使用。因为你不控制字体供应商提供的CSS，你就无法控制字体的显示属性在实例中的存在，更不要说给它传递值。
CSS，包括字体显示属性，或者当你检索他们的服务嵌入代码时允许它作为一个可配置的选项。
web typography landscape，它大大简化了在JS中繁杂的排序任务。返回搜狐，查看更多
责任编辑：