通过内联 CSS 加载外部字体答案

【问题标题】：Loading an external font via inline CSS通过内联 CSS 加载外部字体
【发布时间】：2020-02-19 21:51:01
【问题描述】：

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

注意：我不是在谈论使用具有 @font-face 定义的外部 CSS 文件，而是类似于以下内容：

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

【问题讨论】：

标签： html css fonts inline font-face

【解决方案1】：

是否可以使用内联 css 加载外部字体？不使用外部 CSS 文件 [....]。

是的，您可以对 Stephen Scaff 的 this article 中所示的一种或多种字体进行 base64 编码，并将它们放入页面中的 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，所以在可预见的未来你可能应该使用那个而且只有那个。此外，此技术将提高您的页面速度得分，但会降低整体性能（即使是首页加载也是如此），除非您仅对关键页面资产进行 base64 编码（例如上面显示的字体字形折叠）和asynchronously load 其余部分。

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

【讨论】：

这很有趣！我的问题可以追溯到 5 年前，从那时起事情就发生了一些变化:) 我现在无法验证它，但我将假设它是迄今为止的“解决方案”。
这仍然只是一个内联样式标签，而不是像他的示例 <h1 style="..."> 那样内联 css
可以将 base64 编码字体放入<style> 标签任何地方，还是仅放入标题中？
不错的选择！我最终使用了transfonter.org

【解决方案2】：

您不能在style 属性中包含@font-face 规则（这是最狭义的“内联CSS”）。根据 HTML 4.01 规范，您根本不能在 body 元素中包含这样的规则（广义上的“内联 CSS”，其中包括 style elements)。但实际上是可能的。

实际上，如果您在body 中包含style 元素，浏览器将对其进行处理，就像它位于语法正确的位置一样，即在head 元素中。它甚至可以“向后”工作，影响出现在它之前的元素。

您甚至可以使这种方法（仅在您无法更改 head 时使用）根据 HTML5 CR 正式正确。它allows 一个style 元素位于任何元素的开头，以流内容作为其内容模型。当前浏览器会忽略scoped 属性。

更新：以下内容不再相关，因为验证器错误已修复。

但是，在 W3C 标记验证器和 validator.nu 中有一个 bug：它们不允许 style 在 body 的开头。为了克服这个错误，并使您的文档除了有效之外还可以验证，您可以使用额外的div 元素：

<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>

【讨论】：

您能否链接 HTML 4.01 规范中禁止此操作的相关部分（我想知道不允许使用哪种其他内联 css）？
@user2284570，我添加了一个说明，它指的是style 元素，在更广泛的意义上可以称为“内联 CSS”，即 CSS 代码直接出现在 HTML 文档中，而不是在单独的 CSS 文档，仅在 HTML 中引用。禁止在body 中使用style 的HTML 4.01 规则在规范中没有单一位置，因为它遵循除@987654342 之外的任何内容模型中style 元素的absence @元素。
好的，谢谢，目前，我的情况是<style scoped></style> 和<style></style> 是从网络消毒剂中分离出来的，但我可以在style="" 属性中添加任何内容。另外，如果我在样式属性中使用@import，它会起作用吗？
@user2284570，不，@import 在 style 属性中不起作用。 style 属性值只能包含声明（name: value），将应用于当前元素。

【解决方案3】：

不，我不知道。您需要在 <style> 块或外部 CSS 文件中声明此类内容。

虽然如果你想要这样的东西，很可能你做错了。

【讨论】：

Though if you want something like this, it's very probable you're doing it wrong.: 在单个 mediawiki 页面上嵌入字体怎么样？
@user2284570 MediaWiki 允许您定义自定义 CSS 文件 IIRC。好久没用了。
是的，但他们只允许整个站点使用它。如果您有一个页面需要 6Mb 字体，那么它将被加载到站点的所有页面中。
@user2284570 在这种情况下，你肯定做错了某事。
Maybe not :-)

【解决方案4】：

如果你使用@font-face，你应该可以做这样的事情：

CSS

@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/raleway_thin-webfont.woff') format('woff'),
     url('fonts/raleway_thin-webfont.ttf') format('truetype'),
     url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;

}

确保包含字体 - 上面的示例已将所有字体放在 css 文件的相对路径目录中。

HTML

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

您应该能够找到免费的基于网络的@font-face 字体here。

【讨论】：

在style= 属性中进行声明有点意思;)