Html 通过内联 CSS 加载外部字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8749225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading an external font via inline CSS
提问by Randomize
Is it possible to load an external font via inline CSS?
是否可以通过内联 CSS 加载外部字体？
Note: I'm nottalking about using an external CSS file with a @font-facedefinition, but rather something like the following:
注意：我不是在谈论使用带有@font-face定义的外部 CSS 文件，而是在谈论以下内容：
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
采纳答案by Josh Habdas
Is it possible loading an external font with inline css? NOT with an external CSS file [....].
是否可以使用内联 css 加载外部字体？不使用外部 CSS 文件 [....]。
Yes, you can base64 encode a font or fonts as shown in this articlefrom Stephen Scaff and drop them into a styleblock 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 thatfor the foreseeable future. Also, this technique will improve your page speed scores, but will degrade performanceoverall (even for first page loads), unless you're only base64-encoding critical page assets (e.g. glyphs of the font shown above the fold) and asynchronously loadthe rest.
每个现代浏览器都支持 WOFF2，因此您可能应该在可预见的未来使用它并且只使用它。此外，这种技术将提高你的速度得分，但会降低性能的整体（甚至是第一页面加载），编码的base64除非你是唯一的关键页面资产（如倍以上显示的字体字形的）和异步加载的休息。
Performance-wise your best bet right now is to use Brotli compressionand pipe the webfont stylesheet down with HTTP/2 Server Push.
在性能方面，您现在最好的选择是使用Brotli 压缩并通过HTTP/2 Server Push将 webfont 样式表向下传递。
回答by Jukka K. Korpela
You cannot include a @font-facerule in a styleattribute (which is “inline CSS” in the most narrow sense). By the HTML 4.01 specification, you cannot include such a rule inside the bodyelement at all (“inline CSS” in a broader sense, which includes styleelements). But in practice it is possible.
您不能@font-face在style属性中包含规则（最狭义的“内联 CSS”）。根据 HTML 4.01 规范，您根本不能在body元素中包含这样的规则（广义上的“内联 CSS”，包括style元素）。但在实践中这是可能的。
In practice, if you include a styleelement inside body, it will be processed by browsers just as if it were in the syntactically correct place, i.e. inside the headelement. It even works “backwards”, effecting elements appearing before it.
在实践中，如果您在 中包含一个style元素body，浏览器会对其进行处理，就像它位于语法正确的位置，即head元素内部一样。它甚至可以“向后”工作，影响出现在它之前的元素。
You can even make this approach – which should be used only if you cannot change the head– formally correct as per HTML5 CR. It allowsa styleelement at the start of any element with flow content as its content model. Current browsers ignore the scopedattribute.
您甚至可以使这种方法（仅在您无法更改时才应使用）head按照 HTML5 CR 正式正确。它允许style在任何具有流内容的元素的开头使用元素作为其内容模型。当前浏览器忽略该scoped属性。
Update: the following is not relevant any more, since the validator bug has been fixed.
更新：以下不再相关，因为验证器错误已修复。
However, there is a bugin the W3C Markup Validator and in validator.nu: they disallow styleat the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra divelement:
但是，W3C 标记验证器和 validator.nu 中存在一个错误：它们不允许style在body. 为了克服这个错误，并使您的文档除了有效之外还可以进行验证，您可以使用一个额外的div元素：
<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
回答by Madara's Ghost
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.
虽然如果你想要这样的东西，很可能你做错了。
回答by m4rk
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的@字体面的字体在这里。
