17370845950

推荐在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）效果更直接

字体细节容易被当成“小事”跳过，但用户第一眼看到的就是它——行高不对会累眼，颜色对比不够会读错，中文字发虚让人怀疑屏幕坏了。真要调，就一次调到位，别留半截。