font-size和font-family是控制文字显示的核心css属性；font-size须带单位（如16px、1.2rem），rem基于html根字号、em基于父元素，font-family需引号包裹含空格字体名并设通用族兜底。
直接用 font-size 和 font-family 这两个 CSS 属性就能控制，但写在哪、怎么写、单位怎么选，决定了效果是否稳定、是否容易维护。
内联 style 为什么改了没反应
常见错误是写了 font-size: 16 却漏掉单位，浏览器直接忽略；或者写了 font-size: 16em，结果父元素是 16px，实际变成 256px，文字撑出屏幕。
- 必须带单位：
16px、1.2rem、120%都合法，16无效 - 内联样式优先级最高，但一旦被
!important覆盖（比如外部 CSS 里写了p { font-size: 14px !important; }），它就失效 - 检查 DevTools 的 Computed 标签页，看最终生效的
font-size值是多少，再反查是哪条规则覆盖的
rem 和 em 到底该用哪个
rem 看 html 元素的 font-size，em 看直接父元素。这不是风格偏好，是控制范围问题。
- 全局调字号（比如整站放大 10%）：只改
html { font-size: 17.6px; }，所有1rem自动变 - 组件内部缩放（如卡片标题比正文大 20%）：用
.card-title { font-size: 1.2em; }，它始终相对于父容器当前字号 - 嵌套三层以上慎用
em：每层1.2em套下来就是 1.728 倍，容易失控；rem不受嵌套影响
字体设置不生效的三个隐藏原因
写了 font-family: 'Noto Sans CJK SC', sans-serif; 却还是显示宋体，往往不是代码错，而是环境或加载问题。
- 字体名含空格或特殊字符，必须加英文单引号或双引号：
'Microsoft YaHei'，不能写成Microsoft YaHei - 系统没装这个字体，又没配 fallback（如
sans-serif），浏览器就回退到默认字体；中文字体建议按「具体→泛用」顺序写：'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif - 用了 Google Fonts 等网络字体但没等加载完就渲染了，文字会先闪一下——加
font-display: swap;可缓解
最易被忽略的是根元素 html 的基准字号没设好。如果项目用 rem，却没在 :root 或 html 上定义初始值，那所有 rem 计算都基于浏览器默认的 16px，后续响应式调整就失去支点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
