Question

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

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

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

Answer 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样式表封装下来。

Answer 2

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

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

您甚至可以使用此方法 - 只有在您无法更改head时才应使用此方法 - 按照HTML5 CR正式更正。在流内容为内容模型的任何元素的开头都有allows个style元素。当前浏览器会忽略scoped属性。

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

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

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

Answer 3

不，不是我所知道的。您需要在<style>块或外部CSS文件中声明此类事物。

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

Answer 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文件的relative-path目录中。

<强> HTML

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

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

通过内联CSS加载外部字体

4 个答案: