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

[pseudo]

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

[fuermosi777]

http://www.youziku.com/ 有一种方式

[pseudo]

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

[oott123]

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

[ChiChou]

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

[ChiChou]

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

[Sivan]

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

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

[Sivan]

@ChiChou 都有效的

[Daniel65536]

https://www.filamentgroup.com/lab/font-events.html

[skylancer]

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

[pseudo]

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

[ChiChou]

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