font-family需按优先级写真实存在的字体名，中文字体名必须加英文引号；font-size受继承和单位影响，推荐clamp()实现流体字号；line-height用无单位数值最安全；font-weight须确认字体实际支持的字重。

font-family 怎么写才真正生效

浏览器不会照单全收你写的字体名，它只认系统里真实存在的字体，而且顺序决定 fallback 行为。font-family 是一个优先级队列，不是“选一个就行”。

常见错误：直接写 "微软雅黑, sans-serif"，但没加引号包裹含空格的中文字体名；或把英文名写成 "Microsoft YaHei" 却忘了 Windows 下实际加载的是 "Microsoft YaHei UI"（Win10+ 默认）。

实操建议：

• 中文字体名必须用英文引号包裹："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
• Mac 和 Windows 字体名不一致，别指望单个名字跨平台生效
• 避免用 font-family: "宋体" —— 系统可能映射到 "SimSun" 或 "NSimSun"，渲染效果不稳定
• 想保底可用 system-ui，它会自动匹配当前系统默认 UI 字体（iOS/macOS/Android/Windows 都支持）

font-size 设置后为什么没变大变小

最常见原因是继承、重置或单位理解偏差。CSS 的 font-size 不是绝对像素值，它受父元素影响，尤其在使用 em 或 rem 时。

立即学习“前端免费学习笔记（深入）”；

典型现象：写了 font-size: 20px 却没变化；或用了 1.5em，结果在不同嵌套层级下大小飘忽不定。

实操建议：

• 检查是否被更高优先级样式覆盖（比如 !important、内联样式、或更具体的 CSS 选择器）
• em 相对父元素，rem 相对根元素（html），调试时可临时加 border 看盒模型是否意外撑开
• 移动端慎用固定 px，iOS Safari 对小于 16px 的文本会强制放大（可加 -webkit-text-size-adjust: 100% 抑制，但需权衡可访问性）
• 想统一缩放体验，推荐用 clamp(1rem, 4vw, 1.5rem) 做流体字号，比媒体查询更轻量

line-height 设得太小导致文字被截断

line-height 控制行高，但它不是“行间距”，而是**整行占据的高度**（含上下留白）。设太小会让上下文字视觉重叠，甚至让 sup、sub 或中文标点溢出容器。

错误认知：以为 line-height: 1 就是“紧贴”，结果发现字被砍掉顶部（如 “g”、“j”、“ü” 的下伸部分）。

实操建议：

• 纯数字值（如 1.5）最安全，它基于当前 font-size 计算，不继承父级 line-height 的像素值
• 避免用 px 或 em 写死 line-height，否则字体大小一变，行高就失配
• 中文排版建议最小值：正文 line-height: 1.6～1.8，标题可略小（1.3～1.5），但别低于 1.2
• 如果用了自定义字体，务必检查其 ascender/descender 区域是否异常 —— 这类问题在 WebFont 加载完成前常表现为文字跳动或裁切

font-weight 数字值为什么不生效

不是所有字体都提供 9 个字重（100～900）。很多中文字体只内置 normal（400）和 bold（700），写 font-weight: 600 就会回退到 400 或模拟加粗（浏览器伪造，边缘发虚）。

典型表现：代码写了 font-weight: 500，DevTools 显示已应用，但肉眼看不出区别；或在 Chrome 看正常，Safari 里变细了。

实操建议：

• 查字体官网或用 @font-face 的 font-weight 声明确认支持哪些值（例如 Noto Sans CJK 支持 300/400/500/700/900）
• 避免依赖浏览器模拟加粗（font-synthesis: weight 可禁用，但兼容性有限）
• 中文字体优先用命名值：font-weight: normal / bold 更稳妥；英文可大胆用 500、600，前提是字体文件真包含
• WebFont 加载时，可用 font-display: swap 防止 FOIT，但要接受短暂的字体替换闪烁