如何通过CSS框架实现自定义字体的高效加载？-css教程-PHP中文网

必须在theme.extend.fontfamily中显式声明自定义字体键名（如'custom': ['customfont', 'sans-serif']），并确保@font-face已正确注册、名称完全一致，否则tailwind不会生成对应工具类。

如何通过css框架实现自定义字体的高效加载？

在 Tailwind CSS 中注册自定义字体并启用按需生成

直接改 tailwind.config.js 是最省事的入口，但很多人漏掉关键点：Tailwind 默认不会为未声明的 font-family 生成对应类，哪怕你已用 @font-face 定义好了。

必须在 theme.extend.fontFamily 中显式声明，例如：{ 'custom': ['CustomFont', 'sans-serif'] }
如果字体有多个字重（如 300、700），要分别注册多个 @font-face 规则，并在配置中用数组映射，比如：'custom-bold': ['CustomFont', 'sans-serif']
不写 sans-serif 回退会导致 Tailwind 编译时忽略该条目——它只认“完整字体栈”，不是单个字体名
改完配置后需重启构建进程（npm run dev 或 pnpm dev），否则新类不会出现在输出 CSS 中

@font-face 必须配合 font-display: swap 才能避免 FOIT

很多项目把字体文件放进 @font-face 就以为万事大吉，结果首屏文字闪一下、空白半秒、再跳一次——这就是 FOIT（Flash of Invisible Text）。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

font-display: swap 是唯一推荐用于正文/标题字体的值；optional 适合装饰性图标字体，fallback 适合品牌 logo 字体但对性能敏感的场景
不要省略 format() 声明，否则 Safari 可能拒绝加载 .woff2 文件（尤其在旧版 iOS 上）
如果用了 local() 回退（如 src: local("PingFang SC"), url(...)），确保本地字体名拼写完全一致——macOS 和 Windows 的系统字体名常有细微差异

预加载 + 子集化才是真正影响首屏速度的关键

光靠框架配置和 @font-face 不解决加载延迟。浏览器默认只在字体被实际使用时才下载，而首屏元素往往还没渲染完成，字体就错过了最佳加载时机。

在中加预加载标签：<link rel="preload" href="fonts/custom.woff2" as="font" type="font/woff2" crossorigin>，注意必须带 crossorigin 属性，否则字体请求会被降级为匿名模式，导致加载失败
用 font-spider 或 glyphhanger 提取页面实际用到的 Unicode 范围，生成子集字体；中文尤其要切，全量思源黑体 WOFF2 仍有 3MB+，子集后可压到 100KB 内
别信“WOFF2 兼容一切现代浏览器”——部分国产安卓 WebView 仍需保留 .woff 备用，且 src 列表里要把 woff2 放第一位

媒体查询 + unicode-range 实现真正的按需加载

一个字体文件不该为所有设备、所有语言全量加载。比如英文站点用不到中文字符集，移动端也不需要高精度装饰字体。

用 unicode-range 拆分中英数字：例如 unicode-range: U+00-FF, U+1F00-1FFF（基本拉丁+希腊字母），中文可限定 U+4E00-9FFF
结合媒体查询控制加载时机：@media (min-width: 768px) { @font-face { ... } }，这样小屏设备根本不会发起字体请求
注意：unicode-range 在 Firefox 中对连字（ligature）支持有限，若用了 OpenType 特性，得额外测试渲染一致性
Tailwind 不支持基于 unicode-range 的条件类生成，这部分必须手写 CSS 或用 PostCSS 插件（如 postcss-font-magician）辅助