返回

让你快速使用的webFont加载和渲染方法

前端

对于webFont来说，一个完整的Font可能包含了很多你并不需要的字体变体，这会造成数兆字节的下载数据。本文将从如何选择合适的字体格式讲起，教你如何优化webFont的加载，让你仅需访问所需的内容，以提升网站性能。

选择合适的字体格式

对于webFont来说，有以下四种字体格式可供选择：

  • WOFF2：浏览器支持度良好，而且压缩率非常高。
  • WOFF：WOFF2的备份格式。
  • TTF：一种常见的字体格式，但文件体积较大。
  • EOT：微软的字体格式，主要用于IE浏览器。

一般情况下，推荐使用WOFF2格式，但需要保证浏览器支持，否则会自动降级到WOFF或其他格式。对于包含OpenType布局特性的字体，还可以在WOFF2或WOFF文件中使用WOFF2 + OpenType特性来实现最佳支持。

使用字体子集

一个完整的webFont可能包含几百个甚至上千个字符，但对于大多数网站来说，实际上只用到了其中一小部分。因此，我们可以使用字体子集来只包含所需的字符，从而减小字体文件的大小。

目前主流的字体服务提供商，比如谷歌字体和Typekit，都提供了字体子集功能。我们可以使用他们的在线工具来生成只包含所需字符的字体文件。

异步加载字体

异步加载字体是指在网页内容加载完成后再加载字体文件。这可以减少字体加载对网页渲染的影响，从而提高网页的加载速度。

我们可以在<head>标签中使用<link>标签来异步加载字体文件，并在<body>标签中使用@font-face规则来应用字体。

<head>
  <link href="font.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
</head>

<body>
  <div style="font-family: 'Font Name'">Font Name</div>
</body>

使用字体显示延迟

字体显示延迟是指在字体文件加载完成后，再等待一段时间才显示字体。这可以防止字体在加载时出现闪烁的情况。

我们可以在@font-face规则中使用font-display属性来设置字体显示延迟。

@font-face {
  font-family: 'Font Name';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

避免使用字体图标

字体图标是一种将字体文件中的字符作为图标使用的技术。虽然字体图标可以减少HTTP请求的数量，但它也会增加字体文件的大小。

因此，如果可以的话，尽量避免使用字体图标。如果必须使用字体图标，那么请确保只包含所需的字符，并使用字体子集来减小字体文件的大小。

总结

通过以上方法，我们可以优化webFont的加载和渲染，从而提升网站的性能和用户体验。