使用inline css加载html页面中的外部字体

前端之家收集整理的这篇文章主要介绍了使用inline css加载html页面中的外部字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用inline css加载外部字体?不带有@ font-face定义的外部CSS文件,但如下所示:
<h1 style="font-family:myfont; src:('http://mysite.com/font/myfont.tff')">test</h1>

解决方法

您不能在style属性(最狭义的“内联CSS”)中包含@ font-face规则。根据HTML 4.01规范,您不能在body元素中包含这样的规则(更广泛的“内联CSS”),其中包括 style elements).但在实践中是可能的。

实际上,如果在体内包含一个样式元素,它将被浏览器处理,就像它在语法正确的位置,即头元素内部一样。它甚至可以“倒退”,影响出现在它之前的元素。

你甚至可以使用这种方法 – 只有当您不能根据HTML5 CR正确更改头像时才应使用此方法。它是allows一个样式元素在任何元素的开始,流内容作为其内容模型。当前浏览器忽略范围属性

更新:以下是不重要的,因为验证器的错误已经修复。

但是,W3C标记验证器和验证器中都有一个bug:它们在主体开始时不允许使用样式。为了克服这个错误,除了有效之外,使文档验证,您可以使用额外的div元素:

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

猜你在找的CSS相关文章