应使用包含多级回退的字体栈而非单一字体名，如"Segoe UI", system-ui, sans-serif；中文字体名需加引号；自定义字体须用@font-face配置woff2/woff格式及font-display: swap；废弃<font>标签；font-family不替代font-size等属性。
用 font-family 指定字体，但别只写一个名字
直接在 CSS 里设 font-family 是最常用也最可靠的方式。只写 "Helvetica" 这种单一字体名等于把渲染交给浏览器猜——它可能根本没装这个字体，最后回退到默认的 serif 或 sans-serif，样式就失控了。
必须提供字体栈（font stack），按优先级从左到右列多个选项，用英文逗号分隔：
body {
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
列表里混用具体字体名、系统关键字（如 system-ui）、通用族名（sans-serif）是标准做法。Windows、macOS、iOS、Android 各自会从中挑一个本地可用的来渲染。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 中文字体名要用引号包裹，比如
"Microsoft YaHei"、"PingFang SC"，否则空格或中文字符会导致解析失败 - Web 安全字体（如
Georgia、Verdana）虽兼容性好，但视觉陈旧，建议仅作保底 - 不要依赖用户电脑上“恰好有”某个冷门字体，那是不可控的
用 @font-face 加载自定义字体，但得配好格式和 font-display
想用非系统字体（比如思源黑体、Inter、或是品牌定制字体），就得自己引入。核心是 @font-face 规则，但它不是“加了就能用”，漏掉关键配置会导致文字闪动、空白或加载阻塞。
至少要声明三样东西：font-family（自定义别名）、src（字体文件路径）、font-display（加载策略）：
@font-face {
font-family: "MyBrandFont";
src: url("fonts/myfont.woff2") format("woff2"),
url("fonts/myfont.woff") format("woff");
font-display: swap;
}
font-display: swap 是目前最稳妥的选择：字体加载中先用备用字体显示，加载完成再替换，避免长时间空白。别用 block（等太久白屏）或默认值（各浏览器行为不一）。
常见坑：
- 只提供
.ttf文件？现代浏览器更倾向.woff2（体积小、压缩率高），至少配齐woff2+woff双格式 -
src路径写错或服务器没开字体 MIME 类型（font/woff2），控制台会报Failed to load resource错误 - 字体版权没确认清楚，商用场景下用盗版字体包风险很高
内联 <font> 标签已废弃，别用
HTML 4 时代用 <font face="Arial"> 控制字体，现在所有主流浏览器都已废弃该标签，W3C 也不再支持。即使它看起来还能“生效”，实际是浏览器在做兼容兜底，行为不可靠，且无法响应式、无法继承、无法用 CSS 媒体查询控制。
如果在老项目里看到这种写法，应该立刻替换成 CSS 方案。强行保留只会让维护成本越来越高，而且和现代前端工程（如 CSS-in-JS、CSS Modules）完全不兼容。
字体大小、粗细、行高要和 font-family 分开设置
font-family 只管“用什么字体”，其他样式必须单独声明。有人误以为写成 font: 16px "Arial" 就够了，其实这是 font 简写属性，漏掉 font-weight 或 line-height 时会重置为浏览器默认值，容易引发意外。
推荐分开写，清晰可控：
p {
font-family: "Inter", system-ui, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
特别注意 font-weight：数值写法（400、700）比文字写法（normal、bold）更精确，尤其对可变字体（variable fonts）或含多字重的字体包来说，bold 可能映射到错误的字重档位。
最后提醒一句：字体加载性能影响首屏体验，font-display: swap 和 preload 关键字体资源是绕不开的实操点，别只盯着样式本身。
