css 确保文本在webfont加载 Bootstrap 字形图标期间保持可见

cx6n0qe3 于 2023-06-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(172)

无论我做了什么，我都无法解决这个问题。Google Pagespeed仍然显示相同的消息。
我已经尝试了许多不同的代码，我认为这是正确的。如果有人能告诉我我错过了什么，我会很感激。

<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
    @font-face {
    font-display: swap;
    font-family: 'Glyphicons Halflings';
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2');
}
</style>

css

来源：https://stackoverflow.com/questions/73958079/ensure-text-remains-visible-during-webfont-load-bootstrap-glyphicons

1条答案

按热度按时间

x8diyxa71#

Bootstrap v3.3.4：我在本地使用Halflings字体，并添加了“font-display：swap;“添加到bootstrap.min.css中相应的@font-face指令。

@font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');font-display:swap;}

在那之后，Google Pagespeed不再抱怨。

赞(0）回复(0）举报 2023-06-07

我来回答

css 确保文本在webfont加载 Bootstrap 字形图标期间保持可见

1条答案

相关问题

热门标签

最新问答