使用inline css在html页面中加载外部字体 [英] Loading external font in html page with inline css
问题描述
是否可以使用内联css加载外部字体？不使用带有@ font-face定义的外部CSS文件，但类似于：
Is it possible loading an external font with inline css? NOT with an external CSS file with @font-face definition but something like:
<h1 style="font-family:myfont; src:('http://mysite.com/font/myfont.tff')">test</h1>
推荐答案
您不能包含 @属性（在最狭义的意义上是内嵌CSS）中的font-face 。通过HTML 4.01规范，您不能在 body 元素中包含这样的规则（inline CSS在更广泛的意义上，其中包括 style 元素） 。
You cannot include a @font-face rule in a style attribute (which is "inline CSS" in the most narrow sense). 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 includes style elements). But in practice it is possible.
在实践中，如果在 head 元素内。
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, i.e. inside the head element. It even works "backwards", effecting elements appearing before it.
你甚至可以使用这种方法 - 只有当你不能改变 head - 根据HTML5 CR正式正确。它允许 a 风格元素，以流内容作为其内容模型。当前浏览器忽略 scoped 属性。
You can even make this approach – which should be used only if you cannot change the head – formally correct as per HTML5 CR. It allows a style element at the start of any element with flow content as its content model. Current browsers ignore the scoped attribute.
更新：以下内容不相关any更多，因为验证器错误已修复。
Update: the following is not relevant any more, since the validator bug has been fixed.
但是，有一个 bug 在W3C Markup Validator和validator.nu中：它们不允许 div 元素：
However, there is a bug in the W3C Markup Validator and in validator.nu: they disallow style at the start of body. To overcome this bug, and to make your document validate in addition to being valid, you can use an extra div element:
<body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
这篇关于使用inline css在html页面中加载外部字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
