font-display是CSS中@font-face的一個(gè)屬性，用於控制自定義字體加載時(shí)的顯示行為。其主要作用是避免瀏覽器在字體加載期間隱藏文本導(dǎo)致的空白文本閃爍（FOIT），從而提升用戶體驗(yàn)和感知性能。 1. 使用swap值可立即顯示備用字體，並在自定義字體加載完成後替換；2. fallback值提供快速顯示與限制延遲替換之間的平衡；3. 避免使用block以減少文本隱藏；4. optional適用於低優(yōu)先級(jí)頁(yè)面或節(jié)省帶寬場(chǎng)景。合理選擇font-display值能有效優(yōu)化網(wǎng)頁(yè)加載體驗(yàn)。

The font-display property improves perceived performance by giving developers control over how custom fonts behave while they're loading. Without it, browsers typically hide text until the font is ready, which can lead to a flash of invisible text (FOIT). This makes your site feel slower than it actually is because users see nothing instead of content.

With font-display , you can choose strategies that show text immediately using a fallback font and swap it once the custom font loads — this avoids FOIT and keeps users engaged with readable content from the start.

What is font-display and why does it matter?

font-display is a CSS descriptor used inside @font-face rules. It tells the browser how to handle the rendering of text while a custom font is still loading. The key idea is to avoid long stretches of blank space or unstyled text by defining a display strategy that matches your performance goals.

There are several available values:

• auto – Browser decides (often results in FOIT)
• block – Briefly hides text during load (default in many browsers)
• swap – Uses fallback font immediately, swaps when custom font loads
• fallback – Short timeout for custom font, otherwise stays on fallback
• optional – Let's the browser decide whether to load the font at all

For most websites aiming for good performance and user experience, swap or fallback are usually the best choices.

How does font-display reduce FOIT?

By default, browsers may delay text rendering until the custom font finishes loading — this is known as FOIT. If the font takes time to download or the network is slow, users see nothing but white space where text should be. That creates a jarring experience and makes the page feel unresponsive.

Setting font-display: swap; solves this by telling the browser to immediately render text using a system or fallback font. Once the custom font becomes available, it replaces the fallback version. Users get immediate content without interruption, even if the preferred font loads a bit later.

This technique reduces the perception of slowness, making your site feel faster and more usable right away.

Which font-display value should you use?

Choosing the right font-display value depends on your design and performance priorities:

• Use swap : For most cases, especially if fast text rendering is important.
• Use fallback : When you want a balance between quick text rendering and limiting late swaps.
• Avoid block : Unless you have a strong visual reason to hide text briefly.
• Consider optional : On low-priority pages or when conserving bandwidth matters.

Here's an example of using swap in a @font-face rule:

 @font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

This ensures that users see readable text instantly, improving both real and perceived performance.

Small detail that makes a difference: FOUT vs FOIT

When using font-display: swap , you might notice a Flash of Unstyled Text (FOUT), where the fallback font appears first, then switches to the custom font. While some consider this a minor visual hiccup, it's generally better for UX than FOIT, where users see nothing at all.

You can reduce the visual jump by choosing a fallback font that closely matches the weight and spacing of your custom font. Also, preloading critical fonts helps shorten the gap between initial render and font swap.

So while FOUT is visible, it's usually less disruptive than invisible text — and much better than making users wait for every font to load before showing anything.

基本上就這些。

以上是字體顯示屬性如何改善感知性能？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！