跳到主要内容

font_famaily

网站和移动端常用字体介绍​

网站和移动端常用的字体格式包括 TrueType (TTF), OpenType (OTF), Web Open Font Format (WOFF), Web Open Font Format 2 (WOFF2), 和 Scalable Vector Graphics (SVG) 字体。每种格式都有其特定的优缺点：

网页和移动端支持​

  1. TrueType (TTF) 介绍：由 Apple 和 Microsoft 在 1980 年代末期共同开发的字体格式。 优点： 广泛支持在多种操作系统和设备上。 提供很好的显示效果和较高的控制精度。 缺点： 文件大小相对较大，可能影响网页加载速度。 不是专为网页优化的格式。
  2. OpenType (OTF) 介绍：基于 TrueType 的扩展，由 Adobe 和 Microsoft 共同开发。 优点： 支持更广泛的字符集和复杂排版功能。 在多种操作系统和设备上得到良好支持。 缺点： 文件大小通常比 TTF 大。 不是专门为网页设计的格式。

仅仅网页支持​

  1. Web Open Font Format (WOFF) 介绍：专为网络而设计的字体格式，是 TTF 或 OTF 的压缩版本。 优点： 广泛支持在所有现代浏览器中。 文件大小比 TTF 或 OTF 小，更适合网络使用。 缺点： 老旧浏览器可能不支持。

  2. Web Open Font Format 2 (WOFF2) 介绍：WOFF 的进一步优化版本，使用 Brotli 算法进行压缩。 优点： 比 WOFF 更小的文件大小，加载更快。 现代浏览器支持度良好。 缺点： 不支持老旧浏览器。

  3. Scalable Vector Graphics (SVG) 字体 介绍：基于 XML 的矢量图形格式，可用于文字。 优点： 可缩放而不失真，适用于高分辨率显示。 某些情况下可用于特定的图标和徽标。 缺点： 文件大小可能较大，不适用于所有文本。 浏览器支持不一致。 总结 对于网页和移动应用开发，WOFF 和 WOFF2 通常是最佳选择，因为它们专为网络优化，提供较小的文件大小和广泛的浏览器支持。 对于需要特殊排版或广泛字符集支持的情况，OTF 可能是更好的选择。 考虑到兼容性和性能，一般建议在 CSS 中同时提供 WOFF2 和 WOFF 格式。

问题​

在开发网站首页时候遇到一个常见问题，就是页面刚进去会闪烁一下，查了一下原因，是因为字体加载导致的，因为网站本身没有内置该字体，我需要从服务器下载引入，但是在尝试了nextjs的预加载后问题并没有解决，我怀着尝试的心态使用了woff2格式字体，效果显而易见，解决了这个问题。