必须用CSS的font-family属性设置HTML标题字体，不可依赖HTML标签或过时font属性；需提供字体栈、注意引号包裹中文名、检查选择器权重与覆盖、优先使用系统中文字体并谨慎引入自定义字体。
HTML 标题用 font-family 指定字体，但不能只改标题标签本身
浏览器默认用系统无衬线字体渲染 到 ，想换字体，必须写 css。光在 html 里加 font 标签或属性（比如过时的 ）已无效，现代浏览器直接忽略。
实操建议：
- 优先用
font-family声明字体栈，例如：font-family: "Helvetica Neue", Arial, sans-serif; - 别只写一个字体名，必须提供备选（如
Arial、sans-serif），否则用户没装该字体时会回退到默认字体，甚至空白 - 中文字体名带空格或中文时，必须用英文引号包裹，比如：
"Microsoft YaHei"、"PingFang SC" - 避免用
标签或style属性内联写，维护困难且无法复用
给
很多人写 h1 { font-family: "Noto Sans CJK SC"; } 没生效，常见原因是选择器被覆盖或拼写错误。
实操建议：
- 检查是否被其他 CSS 规则覆盖：用浏览器开发者工具（F12）看
font-family是否被划掉，是则说明权重不够或顺序靠后 - 确保选择器足够具体，比如项目用了 BEM 或组件化结构，可能需要写成
.article__title h1或h1.title - 如果页面有多个
但只想改某一个，加 class 更稳妥，别依赖标签选择器 - 注意大小写：CSS 中
h1和H1是等价的，但 class 名大小写敏感，.Title≠.title
中文字体加载慢？@font-face 引入需谨慎
想用思源黑体、霞鹜文楷这类开源字体，得用 @font-face 加载，但容易引发 FOIT（字体闪白）或布局偏移。
实操建议：
- 优先使用系统自带中文字体栈，例如：
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;—— 启动快、无需下载 - 若必须自定义字体，用
font-display: swap;防止文字长时间不可见 - WOFF2 格式优先（体积小、兼容好），别传 TTF 或 OTF 原始文件
- 别把整套字重（light/regular/bold）全加载，按需引入，比如只用 regular 和 bold，就只声明两个
@font-face
移动端标题字体变小？检查 viewport 和缩放行为
有些手机上 看起来特别小，不是字体设错了，而是浏览器自动缩放或视口设置问题。
实操建议：
- 确认
存在且没写错，缺了这行，iOS Safari 会强制缩放文本 - 不要用
font-size: 100%或em直接套在上，它会继承父级字号再放大，容易失控；推荐用rem或固定px+ 媒体查询微调 - iOS 上
默认有-webkit-text-size-adjust: auto;，某些情况会放大，可显式设为none（但慎用，影响可访问性） - 用
font-size: clamp(1.5rem, 4vw, 2.5rem);做响应式字号更可靠，比纯媒体查询灵活
字体这件事，表面是改个 font-family，实际牵扯到加载策略、CSS 层叠、设备特性、甚至可访问性反馈。最容易被忽略的是：你写的那行 CSS，到底有没有真正应用到目标元素上——别猜，F12 看 computed style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
