如何在网页加载完成后再加载字体？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3330 天前的主题，其中的信息可能已经有所发展或是发生改变。

网页上有自定义字体，发现如果直接用 @font-face 定义的话会先等字体下载完成再显示内容，这样有可能导致体验不佳。看到一些网站是先加载内容再加载字体，请问有什么办法可以实现？

11 条回复 • 2015-11-16 17:24:54 +08:00

fuermosi777

2015-11-16 11:19:59 +08:00

pseudo

2015-11-16 11:25:55 +08:00

@fuermosi777 谢谢，不过我是用的自定义英文字体，大概几百 K ，是个很尴尬的大小

oott123

2015-11-16 11:42:26 +08:00 via Android

不配合 js 感觉做不到
或许可以试试把字体的 css 引入放到页尾？

ChiChou

2015-11-16 11:42:45 +08:00

js 访问 document.styleSheets 对象可以动态修改 CSS 样式，可以尝试在 css 里不写 font-family ，然后给 document 的 ready 里动态添加？

ChiChou

2015-11-16 11:43:21 +08:00

@oott123 记得 css 放页尾应该不起作用

Sivan

2015-11-16 11:47:31 +08:00

可以用 font loader 。如果不想通过 js 实现，也可以把字体转 base64 存一个单独的 CSS 加载。

具体技术讨论可以自行搜索关键词「 FOUT 」、「 FOIT 」

Sivan

2015-11-16 11:48:43 +08:00

@ChiChou 都有效的

Daniel65536

2015-11-16 13:14:03 +08:00 via iPhone

skylancer

2015-11-16 14:08:24 +08:00

@ChiChou 卧槽.. 居然见到了吃抽，还以为凑巧同名 ID 结果一看 0GiNr- -..

pseudo

2015-11-16 15:03:07 +08:00

@oott123
@ChiChou
@Sivan
@Daniel65536
十分感谢各位！

ChiChou

2015-11-16 17:24:53 +08:00

@Sivan 我意思是对阻塞页面加载这个问题不起作用