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

原文 标签 html css fonts inline font-face

是否可以通过内联 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阻止您的页面以避免外部请求。

如果您使用的浏览器支持它,也可以按照您描述的方式使用此技术。
<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 使用它,并且只使用它。此外,此技术将提高您的页面速度得分,但 会降低性能 整体(即使是第一页加载),除非你只是 base64 编码的关键页面 Assets (例如折叠上方显示的字体的字形)和 asynchronously load其余的部分。

在性能方面,您现在最好的选择是使用 Brotli compression并使用 HTTP/2 Server Push 向下传递 webfont 样式表.

关于html - 通过内联 CSS 加载外部字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8749225/

相关文章:

javascript - 除了某些元素,我可以模糊整个网站吗

css - 输入类型上的背景色=按钮:hover state sticks in IE

html - HTML中的自定义Google字体错误

flash - 嵌入字体并在 Flash 中正确显示的问题

html - 如何在开始滚动之前不隐藏具有动态高度的固定顶部标题下的元素

html - 如何在一行中将一幅图像放置在左侧,另一幅图像放置在中央?

html - CSS float 正确的奇怪行为

android - chrisjenx 的书法库无法正常工作

html - 对齐表格中的数据

javascript - 如何在div中查找元素的值?