html - 通过内联 CSS 加载外部字体

Question

是否可以通过内联 CSS 加载外部字体？

注意:我不是在谈论使用带有 @font-face 定义的外部 CSS 文件，而是像下面这样的东西:

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>

Answer 1

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 编码(例如上面显示的字体的字形fold)并异步加载其余部分。

就性能而言，您现在最好的选择是使用 Brotli compression并使用 HTTP/2 Server Push 将 webfont 样式表向下传输.