字体，网页的灵魂舞者：关于 font-display 和 font-preloading 的碎碎念
话说，作为一个长期和互联网厮混的家伙，我对网页的审美要求其实不高，干净整洁，信息明确，能让我快速找到需要的内容就行。但有些网站，明明内容不错，却总让我觉得哪里不对劲，就像是穿着廉价西装的绅士，总少了点味道。后来我才明白，很多时候，问题出在字体上。
字体，就像网页的灵魂舞者，悄无声息地影响着我们的阅读体验。它能让文字跳跃起来，赋予内容情感，甚至决定了我们对一个网站的第一印象。想想那些充满复古风的网站，是不是用的字体就让你一下子穿越回了过去？而那些科技感十足的网站，字体也必然是简洁现代的。
但字体这玩意，用好了是加分项，用不好那就是灾难。最让人抓狂的，莫过于网页加载时那段空白期。文字内容明明已经加载好了，却迟迟不显示，直到字体文件加载完毕，才突然蹦出来，就像一个迟到的演员，错过了开场白。这种体验，简直糟糕透了！
为了解决这个问题，前端工程师们开始研究各种字体加载优化策略，其中最常用的就是 font-display 和 font-preloading。这两个家伙，就像是网页的舞台总监和先遣部队，一个负责控制字体显示的节奏，一个负责提前准备好字体资源。
font-display：网页字体的舞台总监
font-display 就像一个舞台总监，它告诉浏览器如何处理字体加载期间的显示问题。它有几个不同的值，每个值都对应着一种不同的显示策略，就像是给字体安排了不同的出场方式。
-
auto：浏览器说了算，你等着瞧吧！ 这是默认值，意味着浏览器拥有最终决定权。它会根据自己的算法来决定字体加载期间的显示策略，就像一个随性的导演，想怎么演就怎么演。但问题是，不同的浏览器可能有不同的算法，导致不同用户的体验不一致。这就像是买彩票，能不能中奖全看运气。 -
block：先隐身，再登场，我是压轴的！ 这种策略会让字体在加载期间完全不可见，直到字体文件加载完毕才会显示出来。这意味着用户会看到一段空白期，直到字体准备好。这就像一个压轴演员，必须等到所有准备工作都完成才会登场，虽然效果惊艳，但观众可能等得不耐烦。 -
swap：先替补，后上位，我能屈能伸！ 这种策略会先使用一个备用字体（通常是系统字体）来显示文本，然后在字体文件加载完毕后，再切换到目标字体。这意味着用户不会看到空白期，但可能会看到字体闪烁的情况。这就像一个替补演员，先顶替上场，等到主角准备好了，再光荣退役。 -
fallback：先替补，再上位，不行就拉倒！ 这种策略和swap类似，也会先使用备用字体显示文本。但不同的是，它有一个短暂的“fallback period”，在这个期间内，如果字体文件加载完毕，就切换到目标字体；如果超过了这个时间，就永远使用备用字体。这就像一个替补演员，只有短暂的上场机会，如果主角迟迟不来，那就只能一直演下去了。 -
optional：看心情，随意点，我不想勉强！ 这种策略也是先使用备用字体显示文本，但它会根据用户的网络状况和设备性能来决定是否加载目标字体。如果网络状况良好，设备性能足够，就加载目标字体；否则，就一直使用备用字体。这就像一个佛系的演员，能演就演，不能演就算了，一切随缘。
选择哪种 font-display 策略，取决于你的具体需求和用户体验目标。如果你追求完美的视觉效果，可以考虑使用 block，但要做好用户等待的准备。如果你更注重速度和用户体验，可以考虑使用 swap 或 fallback，但要容忍字体闪烁的可能性。而 optional 则适合那些对字体要求不高，更注重性能的场景。
font-preloading：网页字体的先遣部队
font-preloading 就像是网页字体的先遣部队，它告诉浏览器提前加载字体文件，以便在需要时能够立即使用。这就像是未雨绸缪，提前做好准备，避免临时抱佛脚。
使用 font-preloading 很简单，只需要在 <head> 标签中添加一个 <link> 标签，并设置 rel 属性为 preload，as 属性为 font，以及 href 属性为字体文件的 URL。
<link rel="preload" href="my-font.woff2" as="font" type="font/woff2" crossorigin>其中，crossorigin 属性是必须的，因为它告诉浏览器以匿名模式加载字体文件，避免出现跨域问题。
font-preloading 可以显著提高字体加载速度，减少空白期，提升用户体验。但要注意的是，过度使用 font-preloading 可能会导致资源竞争，影响其他资源的加载速度。因此，要根据实际情况，合理使用 font-preloading。
font-display 和 font-preloading 的完美配合
font-display 和 font-preloading 就像是一对完美的搭档，一个负责控制字体显示的节奏，一个负责提前准备好字体资源。它们可以协同工作，共同提升字体加载性能，改善用户体验。
一般来说，我们可以将 font-preloading 和 font-display: swap 结合使用。通过 font-preloading 提前加载字体文件，减少空白期；通过 font-display: swap 先使用备用字体显示文本，避免用户长时间等待。当字体文件加载完毕后，再切换到目标字体，给用户带来更好的视觉体验。
一些额外的思考
除了 font-display 和 font-preloading，还有一些其他的字体优化策略，比如：
- 选择合适的字体格式： 不同的字体格式有不同的优缺点。一般来说，
woff2格式的压缩率最高，兼容性也最好，是首选的字体格式。 - 字体子集化： 只保留网页中用到的字符，去除不必要的字符，可以显著减小字体文件的大小。
- 使用 CDN： 将字体文件托管在 CDN 上，可以利用 CDN 的缓存和加速功能，提高字体加载速度。
字体优化是一个需要不断探索和实践的过程。我们需要根据具体的项目需求和用户体验目标，选择合适的优化策略，才能让网页的灵魂舞者跳出最美的舞姿。
最后，我想说的是，字体不仅仅是技术问题，也是艺术问题。 字体选择要符合网站的整体风格，要能体现网站的个性和品牌形象。一个好的字体，能让网站更具吸引力，更能打动用户的心。
希望我的这些碎碎念，能给你带来一些启发。下次在网页上看到漂亮的字体时，不妨多留意一下，或许你能从中发现一些有趣的细节。毕竟，细节决定成败嘛！