我正在使用@font-face在我的网站中嵌入字体.首先,文本呈现为系统默认设置,然后(大概在加载字体文件后)几分之一秒后呈现正确的字体.有没有办法最大限度地减少/消除这种延迟,方法是将页面呈现延迟到字体加载或类似的时候.

推荐答案

这取决于浏览器的行为.

首先,你的@font声明在哪里?它是内嵌到HTML中,在页面上的CSS表中声明,还是(希望)在外部CSS表中声明?

如果它不在外部工作表中,请try 将其移动到外部工作表中(无论如何,这通常都是更好的做法).

如果这不起作用,您需要问问自己,几分之一秒的差异真的会对用户体验造成重大损害吗?如果是,那么考虑一下JavaScript,您可能可以做几件事,重定向、暂停等,但这些实际上可能比原始问题高出worse个.对用户来说更糟,维护起来也更糟.

此链接可能会有所帮助:

http://paulirish.com/2009/fighting-the-font-face-fout/

Css相关问答推荐

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

如何定位此下拉框的下拉面板

不了解重复-线性-渐变 colored颜色 停止

使用tailwind 将父div限制为其具有溢出的最短子级的高度

:not() 适用于特定类中的所有 html 标签

有没有办法在 CSS 字体速记中使用数字字体粗细?

具有共享的自动调整列宽的多个 CSS 网格

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)?

before 元素的过渡效果

如果中间元素的内容不适合 CSS,如何将其分隔到新行?

Sass @use 排序

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

基于类的 CSS Select 器

Div Size 自动调整内容大小

溢出的文本可以居中吗?

范围内的 CSS 未在组件中应用

为什么 CSS 中的光标:指针效果不起作用

将样式应用于第一行的单元格

为什么容器 div 坚持比 IMG 或 SVG 内容略大?

html元素(div)的全高,包括边框,填充和边距?