推荐在body上设font-family和font-size：body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; }，并添加字体渲染优化属性。
怎么用 CSS 统一设置 HTML 页面默认字体和大小
直接在 body 上设 font-family 和 font-size 最省事，但要注意浏览器默认样式干扰。比如 Chrome 默认 body 是 16px，而某些移动端会触发缩放，导致实际显示偏小。
推荐写法：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
}
-
font-family列表里把系统字体放前面，兼顾性能和还原度 - 别只写
"Microsoft YaHei"或"SimSun"—— 没装对应字体的 Mac/Linux 用户会 fallback 到不美观的默认字体 - 用
px控制基础大小更可控；想响应式可改用rem，但得先设好html { font-size: 16px; }
给标题（h1–h6）单独调颜色和大小
标题默认加粗、有 margin，直接覆盖 color 和 font-size 就行，但注意层级关系——如果用了 CSS 预处理器或框架，可能被其他规则覆盖。
常见错误：写 h1 { color: #333; } 没生效，其实是被后面某条 h1 { color: inherit; } 覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查 computed 样式，确认最终生效的是哪条规则
- 避免用
!important，优先提高选择器特异性，比如写成body h1或加 class 如.page-title - 字号建议阶梯式设定：
h1: 2rem,h2: 1.5rem,h3: 1.25rem，比像素值更适配缩放
超链接（a 标签）颜色怎么改又不破坏可访问性
只改 a { color: #007bff; } 不够，用户需要知道链接是否已访问、是否悬停、是否聚焦（尤其键盘操作时）。
必须同时定义四个状态，顺序不能错（LVHA 原则）：
a:link { color: #007bff; }
a:visited { color: #6f42c1; }
a:hover { color: #0056b3; }
a:focus { outline: 2px solid #007bff; }
-
:focus的outline别设成none，除非你提供了等效的焦点高亮（比如box-shadow） - 颜色对比度要 ≥ 4.5:1，可用浏览器插件如 axe DevTools 检查
- 别用纯红色/绿色表示状态——色觉障碍用户可能无法分辨
中文字体在不同系统下显示发虚或太细怎么办
本质是字体渲染策略差异：macOS 用 subpixel antialiasing，Windows 默认 ClearType，Linux 各发行版不一。CSS 里加几行微调能明显改善：
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
-
-webkit-font-smoothing: antialiased关闭 macOS 的子像素渲染，减少彩色边纹 -
-moz-osx-font-smoothing: grayscale强制灰度抗锯齿，让中文字更稳重 -
text-rendering: optimizeLegibility启用 OpenType 连字和字距调整，对英文和部分中文字体（如 Noto Sans CJK）有效 - 注意：这些属性不是万能解药，有些字体本身 hinting 差，换字体（比如用
Noto Sans SC替代Helvetica）效果更直接
