字体不显示主因是@font-face声明不兼容：格式顺序错误（.woff2须置首并降级）、路径以css文件为基准、font-display缺失致foit、font-family名称大小写/引号不一致、format()值非法（如'ttf'应为'truetype'）。
字体在部分浏览器不显示，基本不是字体文件本身坏了，而是 @font-face 声明没对上浏览器的“口味”——格式不认、路径错位、语法出岔，或者浏览器压根没机会加载它。
浏览器只认它能解析的第一个 src 格式
现代浏览器（Chrome/Firefox/Safari 10+）优先吃 .woff2，但 IE9、旧版 Android WebKit、老 Safari 可能直接跳过它，甚至整条 @font-face 规则都忽略（尤其当 .eot 或 .ttf 没放对位置时）。关键不是“有没有”，而是“谁排第一”。
-
.woff2放最前：适合现代项目，但必须搭配降级（否则 IE9/Android 4.4 就挂） -
.woff紧跟其后：覆盖 IE9+、iOS 5.1+、Android 4.4+，兼容广 -
.ttf写成format('truetype')：别写format('ttf')，后者是非法值，Safari 和 Chrome 会静默丢弃该源 - 避免把
.eot放首位：非 IE 浏览器看到不识别的格式可能直接终止解析，后面再好的.woff2也白搭
路径错误比你想象中更隐蔽
相对路径是以 CSS 文件为基准，不是 HTML。开发时看着路径没错，构建后却 404，十有八九是这个原因。
- 打开浏览器 Network 面板，过滤
fonts或woff2，看请求是否返回 404 或 403 - 用绝对路径（如
src: url('/assets/fonts/myfont.woff2')）可绕过嵌套层级混乱问题 - Webpack/Vite 项目里，确保字体文件被 asset handler 处理（比如 Vite 中
public/下的文件走静态路径，src/assets/下的需用new URL('./xxx.woff2', import.meta.url)） - 注意大小写：Linux 服务器区分
MyFont.woff2和myfont.woff2，本地 macOS 可能不报错，上线就失效
不加 font-display 就等于听天由命
默认行为是阻塞渲染最多 3 秒（FOIT），超时后才 fallback 到系统字体——用户看到白块或闪动，不是字体没加载，是浏览器故意等它，等不到才放弃。
-
font-display: swap;是当前最稳妥的选择：立刻用后备字体画出来，加载完无缝替换 -
font-display: optional;适合装饰性字体，弱网下直接跳过，不发请求 - 别用
block：移动端用户可能等 3 秒才见字，跳出率飙升 - 声明位置必须紧贴
@font-face块内，不能写在外部选择器里
名称不一致、拼写差一个字符就全盘作废
font-family 是自定义标识符，不是文件名，也不是类名。它大小写、空格、引号都要严丝合缝。
- 声明里写的是
font-family: 'MyCustomFont'，调用时就必须写font-family: 'MyCustomFont', sans-serif;——少引号、多空格、大小写错（如'mycustomfont'）都会失败 - 避免在
font-family值里混用英文引号和中文引号，复制文档代码时容易中招 - 不要依赖
local()：比如local('PingFang SC')在 Windows 或 Linux 上不会命中，反而触发一次无意义网络请求 - 检查是否有更高优先级的 CSS 覆盖了你的
font-family，比如某个组件库的!important规则
最容易被忽略的是 format() 的字符串必须严格匹配规范：'woff2'、'woff'、'truetype'、'embedded-opentype' ——写成 'ttf' 或 'eot' 就等于没写，浏览器直接跳过那一项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
