网站引用字体，为什么有的用truetype，有的用woff2 ？

今天看到一个作者的代码，发现他引用的虽然是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