为确保文本在网页字体加载期间保持可见状态，可以考虑以下几种方法： 1.使用系统默认字体或web-safe字体：这些字体通常是已经在大多数操作系统和浏览器中安装和加载的，因此在页面加载期间可以立即呈现。这样，即使自定义字体尚未加载，文本也将始终可见。 2.通过CSS实现字体预加载：可以在CSS中使用@font-face规则来加载自定义字体。通过在页面加载之前预加载字体，可以确保在文本加载之前字体已经被下载到本地。这样可以避免在文本加载期间出现任何延迟。 3.使用“font-display”属性：在CSS中，可以使用“font-display”属性来控制字体的显示方式。此属性可以设置为“swap”、“fallback”、“optional”或“block”等值。其中，“swap”值表示使用系统默认字体或web-safe字体来立即呈现文本，而自定义字体仍在后台下载。一旦字体下载完成，文本将立即显示使用自定义字体。这样，即使自定义字体尚未完全加载，文本也始终可见。 4.避免在加载期间阻止渲染：确保页面中的CSS和JavaScript代码不会在加载期间阻止文本的呈现。可以通过将CSS代码放在<head>标记中，将JavaScript代码放在文档底部，或使用defer或async属性来延迟代码执行，来避免此问题。
@font-face { font-family: "Open Sans Regular"; font-weight: 400; font-style: normal; src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2"); font-display: swap; }
标签：font,自定义,字体,文本,display,CSS,加载 From： https://www.cnblogs.com/louqianzhu/p/17333771.html