仅用 .ttf 文件和简单 @font-face 声明无法在多数浏览器中显示自定义字体；必须提供多格式字体文件（WOFF2、WOFF、EOT、SVG）、明确指定 format()，并确保 font-family 名称与字体内部元数据一致。
仅用 `.ttf` 文件和简单 `@font-face` 声明无法在多数浏览器中显示自定义字体；必须提供多格式字体文件（woff2、woff、eot、svg）、明确指定 `format()`，并确保 `font-family` 名称与字体内部元数据一致。
在 Web 开发中，通过 @font-face 引入本地字体看似简单，但实际常因格式缺失或声明不规范导致字体“加载失败”——页面仍显示默认字体，控制台却无明显报错。根本原因在于：主流浏览器对字体格式的支持存在差异。例如：
- IE 8–11 依赖 .eot（Embedded OpenType）；
- Firefox、Chrome、Safari 早期版本需 .woff；
- 现代 Chrome/Firefox/Edge/Safari 全面支持更高效的 .woff2；
- .ttf 虽被广泛支持，但必须显式声明 format('truetype')，否则部分浏览器（尤其是 Safari 和旧版 Edge）会忽略该源；
- .svg 主要用于旧版 iOS Safari（已基本淘汰，但仍建议保留以保底）。
因此，正确的 @font-face 规则绝非仅写一行 src: url('font.ttf')，而应采用「多源回退 + 显式格式标注」策略：
@font-face {
font-family: 'MyCustomFont'; /* 注意：此名称须与字体文件内嵌的 PostScript 名或 Full Name 严格一致 */
src: url('fonts/myfont.eot'); /* IE9 及以下 */
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6–IE8 修复 */
url('fonts/myfont.woff2') format('woff2'), /* 推荐优先加载：体积小、性能优 */
url('fonts/myfont.woff') format('woff'), /* 广泛兼容的现代格式 */
url('fonts/myfont.ttf') format('truetype'), /* 桌面浏览器通用 */
url('fonts/myfont.svg#MyCustomFont') format('svg'); /* iOS < 4.2 回退 */
font-weight: normal;
font-style: normal;
font-display: swap; /* 关键优化：避免 FOIT（空白闪动），推荐始终添加 */
}⚠️ 关键注意事项：
- font-family 名称不是文件名：它对应字体文件内部的 name 表（如 Font Book 中显示的“全名”）。可用工具（如 FontDrop）上传 .ttf 查看真实字体名，避免使用空格/下划线随意命名；
- 路径必须准确：url() 中的路径是相对于 CSS 文件位置的，而非 HTML。建议统一将字体存放在 ./fonts/ 子目录，并确认文件权限与服务器 MIME 类型配置（.woff2 应返回 font/woff2）；
- 务必生成完整格式集：手动转换格式既繁琐又易出错。推荐使用 Font Squirrel Webfont Generator（选择 “Expert” 模式 → 勾选全部格式 → 启用 “Legal” 检查），一键输出含 CSS 样式表与全部字体文件的 ZIP 包；
- 启用 font-display: swap：防止文本渲染阻塞（FOIT），确保内容可读性优先于字体美观性，符合 Web 性能最佳实践。
完成上述配置后，在样式中即可安全调用：
h1 {
font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}（注意：始终提供系统字体作为后备，保障极端情况下的可读性）
总结：自定义字体的可靠加载 = ✅ 多格式覆盖 + ✅ 显式 format() 声明 + ✅ 准确 font-family 命名 + ✅ font-display 优化 + ✅ 工具化生成。跳过任一环节，都可能导致字体在特定设备或浏览器中静默失效。
