通过内联 CSS 加载外部字体
[英]Loading an external font via inline CSS
问题描述
Is it possible to load an external font via inline CSS?
是否可以通过内联 CSS 加载外部字体？
Note: I'm not talking about using an external CSS file with a @font-face definition, but rather something like the following:注意：我不是在谈论使用带有@font-face定义的外部 CSS 文件，而是类似于以下内容：
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
4 个解决方案
解决方案1
32 已采纳 2017-04-18 07:01:42
Is it possible loading an external font with inline css?
Yes, you can base64 encode a font or fonts as shown in this article from Stephen Scaff and drop them into a style block in your page to avoid the external request.是的，您可以对一种或多种字体进行 base64 编码，如 Stephen Scaff 的这篇文章中所示，并将它们放入页面中的style块中以避免外部请求。
It may also be possible to use this technique in the way you describe if the browser you're using supports it.如果您使用的浏览器支持它，也可以按照您描述的方式使用此技术。
<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>
Every modern browser supports WOFF2 , so you should probably use that and only that for the foreseeable future.每个现代浏览器都支持 WOFF2 ，因此您可能应该在可预见的未来使用它并且只使用它。 Also, this technique will improve your page speed scores, but will degrade performance overall (even for first page loads), unless you're only base64-encoding critical page assets (eg glyphs of the font shown above the fold) and asynchronously load the rest.此外，此技术将提高您的页面速度得分，但会降低整体性能（即使是第一页加载），除非您仅对关键页面资产进行 base64 编码（例如折叠上方显示的字体的字形）并异步加载休息。
Performance-wise your best bet right now is to use Brotli compression and pipe the webfont stylesheet down with HTTP/2 Server Push .在性能方面，您现在最好的选择是使用Brotli 压缩并通过HTTP/2 Server Push将 webfont 样式表向下传递。
解决方案2
12 2013-03-10 08:56:58
You cannot include a @font-face rule in a style attribute (which is “inline CSS” in the most narrow sense).您不能在style属性中包含@font-face规则（最狭义的“内联 CSS”）。 By the HTML 4.01 specification, you cannot include such a rule inside the body element at all (“inline CSS” in a broader sense, which includesstyle elements) .根据 HTML 4.01 规范，您根本不能在body元素中包含这样的规则（广义上的“内联 CSS”，包括style元素） 。 But in practice it is possible.但在实践中这是可能的。
In practice, if you include a style element inside body , it will be processed by browsers just as if it were in the syntactically correct place, ie inside the head element.在实践中，如果你在body包含一个style元素，它会被浏览器处理，就像它在语法正确的地方一样，即在head元素内。 It even works “backwards”, effecting elements appearing before it.它甚至可以“向后”工作，影响出现在它之前的元素。
You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR.您甚至可以根据 HTML5 CR 将这种方法（只有在您无法改变head时才应使用）正式正确。 It allows a style element at the start of any element with flow content as its content model.它允许在任何以流内容作为其内容模型的元素的开头使用style元素。 Current browsers ignore the scoped attribute.当前浏览器忽略scoped属性。
Update : the following is not relevant any more, since the validator bug has been fixed.更新：以下不再相关，因为验证器错误已修复。
However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body .但是，W3C 标记验证器和 validator.nu 中存在一个错误：它们不允许在body开头使用style 。 To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:为了克服这个错误，并使您的文档在有效之外进行验证，您可以使用额外的div元素：
<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
解决方案3
3 2012-01-05 20:27:02
No, not that I know of.不，不是我所知道的。 You will need to declare this kinds of things on a <style> block or an external CSS file.您需要在<style>块或外部 CSS 文件中声明此类内容。
Though if you want something like this, it's very probable you're doing it wrong.虽然如果你想要这样的东西，很可能你做错了。
解决方案4
-4 2012-01-05 20:38:50
If you use @font-face, you should be able to do something like this:如果你使用@font-face，你应该能够做这样的事情：
CSS 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;
}
Make sure to include the fonts - the above example has placed all of the fonts in a relative-path directory to the css file.确保包含字体 - 上面的示例已将所有字体放置在 css 文件的相对路径目录中。
HTML HTML
<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
You should be able to find free web-based @font-face fonts here .你应该能够找到免费的基于Web的@字体面的字体在这里。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.