Ran*_*ize 42 html css fonts inline font-face
是否可以通过内联CSS加载外部字体？
注意:我不是在谈论使用带有@font-face定义的外部CSS文件,而是如下所示:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
Jos*_*das 18
是否可以使用内联css加载外部字体？不使用外部CSS文件[....].
是的,您可以对Stephen Scaff 本文所示的字体或字体进行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>
每一个现代浏览器支持WOFF2,所以你可能应该使用,并只在可预见的未来.此外,这种技术将提高你的速度得分,但会降低性能的整体(甚至是第一页面加载),除非你是唯一的base64编码关键页面资产(倍以上显示的字体字形如)和异步加载的休息.
性能方面,你现在最好的选择是使用Brotli压缩并使用HTTP/2服务器推送管理 webfont样式表.
Juk*_*ela 10
您不能@font-face在style属性中包含规则(在最狭义的意义上是"内联CSS").根据HTML 4.01规范,您根本不能在body元素中包含这样的规则(广义上的"内联CSS",其中包括style元素).但在实践中它是可能的.
实际上,如果你style在里面包含一个元素body,它将被浏览器处理,就像它在语法上正确的位置,即head元素内部一样.它甚至可以"向后"工作,影响出现在它之前的元素.
您甚至可以使用此方法 - 只有在您无法更改时才应使用此方法 - head按照HTML5 CR正式更正.它允许一个style在与流内容作为其内容模型中的任何元素的起始元件.当前浏览器忽略该scoped属性.
更新:以下内容不再相关,因为验证程序错误已得到修复.
但是,W3C标记验证器和validator.nu中存在一个错误:它们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>