font-display 是一个 CSS 属性，用于控制在字体加载期间和失败时文本的显示方式。这个属性主要用于 @font-face 规则，以改善网页的字体加载性能和用户体验。
font-display 的作用主要体现在以下几个方面：
- 控制字体加载时的行为：在字体文件还未加载完成时，
font-display可以控制文本的显示方式。例如，你可以选择使用备用字体显示文本，直到自定义字体加载完成。 - 处理字体加载失败的情况：如果自定义字体由于某种原因无法加载，
font-display可以定义在这种情况下的文本显示方式。你可以选择隐藏文本，使用备用字体，或者显示一个空白的占位符。 - 提升用户体验：通过合理使用
font-display，你可以确保用户在网页加载过程中始终能看到清晰的文本，即使自定义字体还未加载完成。这有助于提升用户体验，避免在字体加载过程中出现文本的闪烁或重新排版。
font-display 属性有以下几个可选值：
auto：浏览器将使用其默认的字体显示策略。block：在字体加载期间，浏览器会隐藏文本，直到字体加载完成。如果字体加载失败，则会使用备用字体。swap：浏览器会立即使用备用字体显示文本，并在自定义字体加载完成后替换为自定义字体。如果自定义字体加载失败，则继续使用备用字体。fallback：浏览器会先尝试使用自定义字体。如果自定义字体在短暂的时间内（如100ms）没有加载完成，则会切换到备用字体。如果自定义字体在后续加载完成，浏览器也不会替换回自定义字体。optional：与fallback类似，但如果自定义字体在短暂时间内没有加载完成，浏览器会继续使用备用字体，并且即使自定义字体在后续加载完成，也不会进行替换。
通过合理使用 font-display 属性和其他性能优化技术，你可以确保网页在加载过程中始终保持良好的用户体验。
