是否可以通过内联 CSS 加载外部字体?
注意:我不是在谈论使用带有 @font-face
定义的外部 CSS 文件,而是像下面这样的东西:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
最佳答案
Is it possible loading an external font with inline css? NOT with an external CSS file [....].
是的,您可以对一种或多种字体进行 base64 编码,如 this article 所示。来自 Stephen Scaff 并将它们放入页面中的 style
block 中以避免外部请求。
如果您使用的浏览器支持,也可以按照您描述的方式使用此技术。
<style>
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: normal;
src: local('PT Sans'), local('PTSans-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
}
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: normal;
src: local('PT Serif'), local('PTSerif-Regular'),
url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
}
</style>
每个现代浏览器 supports WOFF2 ,所以在可预见的 future ,您应该并且只使用那个。此外,此技术会提高您的页面速度得分,但会降低整体性能(即使对于首页加载也是如此),除非您仅对关键页面 Assets 进行 base64 编码(例如上面显示的字体的字形折)和asynchronously load剩下的。
就性能而言,您现在最好的选择是使用 Brotli compression并使用 HTTP/2 Server Push 将 webfont 样式表向下传输.
关于html - 通过内联 CSS 加载外部字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8749225/