侧边栏壁纸
博主头像
Wood Chen博主等级

独唱独酬,独行独坐还独卧

  • 累计撰写 206 篇文章
  • 累计创建 126 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录

网站引用字体,为什么有的用truetype,有的用woff2 ?

wood
2023-10-10 / 0 评论 / 0 点赞 / 14 阅读 / 1122 字
今天看到一个作者的代码,发现他引用的虽然是woff2字体,但是format设置的却是truetype,好奇展示效果,于是查了下

例如

@font-face {
    font-family: 'CZL';
    src: url('https://xxx/CZL.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

答案

“truetype”和“woff2”这两个是在CSS中的@font-face规则中定义的字体格式。

当你在网页上定义自定义字体时,你可能会看到这两种格式。这两种格式的主要区别是文件的大小和兼容性。

TrueType

是一种最早由Apple开发的字体格式,后来Microsoft也对其进行了扩展。它是一种非常成熟且广泛使用的字体格式,特别是在Mac和Windows操作系统中,几乎所有的系统字体都是使用TrueType格式。TrueType字体的主要优点是其广泛的兼容性。

WOFF2

(Web Open Font Format 2) 是一种专为Web设计的字体格式。相对于TrueType和其他传统的字体格式,WOFF2格式的字体文件更小,因此加载速度更快。除了文件大小更小之外,WOFF2还支持其他的Web特性,如跨域加载。然而,它的主要缺点是兼容性不如TrueType,尤其是在一些旧的浏览器中。

使用同一种字体,但格式不同(比如一种是TrueType,另一种是WOFF2)通常不会影响字体的显示效果,因为这两种格式都是用来描述相同的字体轮廓。然而,使用不同的格式可能会影响字体的加载速度(因为WOFF2文件通常更小),以及在一些不支持WOFF2的旧浏览器中的兼容性。


这就是为什么有的网页会为同一个字体提供多种格式。在这种情况下,浏览器会选择它支持的最优格式进行加载。例如,如果浏览器支持WOFF2,它就会选择WOFF2格式的文件,因为这种格式的文件大小更小,加载速度更快。

最终我选择的还是woff2

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区