仅用 url('font.ttf') 声明字体无法在多数浏览器中正常显示；必须指定 format() 类型，并提供 WOFF2、WOFF、EOT、SVG 等多种格式以确保跨浏览器兼容性，同时注意 font-family 名称需与字体元数据一致。
仅用 `url('font.ttf')` 声明字体无法在多数浏览器中正常显示；必须指定 `format()` 类型，并提供 woff2、woff、eot、svg 等多种格式以确保跨浏览器兼容性，同时注意 `font-family` 名称需与字体元数据一致。
在 Web 开发中，通过 @font-face 引入本地字体看似简单，但实际部署时常因格式缺失或声明不规范导致字体“静默失效”——页面仍显示默认字体，控制台却无明显报错。根本原因在于：现代浏览器对字体格式的支持存在显著差异，且 src 属性必须明确标注字体类型。
✅ 正确的 @font-face 声明结构
以下是一个生产环境推荐的完整写法（支持 IE9+ 及所有现代浏览器）：
@font-face {
font-family: 'MyCustomFont'; /* 必须与字体文件内嵌名称严格一致 */
src: url('fonts/myfont.eot'); /* IE9 及更早版本 */
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6–IE8 兼容 */
url('fonts/myfont.woff2') format('woff2'), /* Chrome, Firefox, Edge, Safari 10+（最高优先级） */
url('fonts/myfont.woff') format('woff'), /* 主流现代浏览器广泛支持 */
url('fonts/myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/myfont.svg#MyCustomFont') format('svg'); /* 仅旧版 iOS Safari（< iOS 4.2） */
font-weight: normal;
font-style: normal;
font-display: swap; /* 推荐：避免 FOIT，提升可读性 */
}? 关键要点说明：
- font-family 值不是文件名，而是字体内部的 PostScript 名称或全名（Full Name），可通过字体查看工具（如 macOS 字体册、Windows 字体预览器，或在线工具 FontDrop）确认；
- .ttf 单独使用无效，必须配合 format('truetype')；
- font-display: swap 是现代最佳实践，确保文本立即以系统字体渲染，待自定义字体加载完成后再替换，避免空白文本（FOIT）。
?️ 如何生成多格式字体包？
手动转换字体格式既繁琐又易出错。推荐使用专业工具自动化处理：
- 访问 Font Squirrel Webfont Generator（免费、开源、无上传风险）；
- 上传 .ttf 或 .otf 源文件；
- 切换至 "Expert" 模式 → 勾选全部格式（EOT、WOFF、WOFF2、TTF、SVG）；
- 下载 ZIP 包，解压后将字体文件放入项目 fonts/ 目录，并引入其配套 CSS（已含完整 @font-face 规则）。
⚠️ 注意事项：
- 确保字体许可证允许 Web 嵌入（如 SIL Open Font License、Apache License 2.0 等）；
- 避免在 src 中混用相对路径与绝对路径；建议统一使用相对于 CSS 文件的相对路径（如 fonts/xxx.woff2）；
- 若使用构建工具（Webpack/Vite），可通过 url-loader 或 asset 模块自动处理字体引用。
✅ 最终使用示例
/* 已正确声明 @font-face 后 */
h1 {
font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 600;
}只要路径正确、格式齐全、名称匹配，字体即可稳定生效。切勿依赖单一 .ttf 文件——跨浏览器字体加载，本质是一场「格式全覆盖」的工程实践。
