您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

通过内联CSS加载外部字体

通过内联CSS加载外部字体

是否可以使用内嵌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压缩,并使用将webfont样式表向下传递。

CSS 2022/1/1 18:15:37 有460人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶