html怎么改字体_网页文字样式设置指南【技巧】

用 font-family 指定字体，但别只写一个名字

浏览器不会“猜”你想要什么字体，它只会按顺序找系统里有没有。只写 "微软雅黑"，在 macos 或 linux 上大概率 fallback 到默认无衬线体，文字可能突然变细、行高错乱。

• 必须提供备选字体链，例如：font-family: "microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
• 中文字体名带空格或中文，一定要加英文引号；英文字体如 Helvetica 可不加，但加了更稳妥
• 结尾的 sans-serif 不是可有可无——它是兜底，没它就可能触发浏览器默认 serif 行为（尤其旧版 IE）
• 避免用 @font-face 加载字体时漏掉 font-display: swap;，否则文字会闪白或长时间不可见

font-size 别死磕像素值，优先用 rem 或 em

写 font-size: 14px; 看似简单，但用户缩放页面、系统设置大字体、ios 强制最小字号时，它就卡死了——文字要么小到看不清，要么撑破容器。

• rem 基于根元素 html 的 font-size，适合全局响应式控制
• em 相对父级，适合组件内缩放（比如按钮文字随图标大小联动）
• 移动端慎用 vw 做字号，横屏时字体会突然巨大，且 iOS safari 对小 vw 值渲染不稳定
• 绝对单位 px 只在 icon font、固定尺寸徽标等极少数场景下合理

行高 line-height 不设单位才真“继承”

写 line-height: 24px; 或 line-height: 1.5em; 看似正常，但子元素继承后会变成固定像素值，一旦字号变化，行高就错位甚至重叠。

• 纯数字（如 line-height: 1.6;）才是推荐写法——它表示“倍数”，子元素用自己字号 × 这个数
• 中英文混排时，1.5 可能不够：汉字字形高、标点下沉，建议至少 1.6 起步，长段落可到 1.75
• 别给 line-height 设 !important，它极易被后代元素意外覆盖，调试时难溯源

字体粗细 font-weight 数字值不是所有字体都支持

写了 font-weight: 600; 却没变粗？不是 CSS 失效，而是当前字体文件根本没包含这个字重。浏览器只能就近匹配，有时直接回落到 400（常规）。

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

• 查字体支持的字重范围：用浏览器 DevTools 的 Fonts 面板，或访问字体官网文档（如思源黑体支持 300/400/500/700）
• 避免依赖 font-weight: bold;，它等价于 700，但有些字体只有 400 和 900 两级
• 自定义字体用 @font-face 时，必须为每个字重单独声明 src，不能靠浏览器“合成”粗体（合成效果糊、锯齿重）

字体这事，表面调几个属性，背后全是操作系统、字体文件、浏览器解析策略的叠加影响。最常出问题的不是写错，而是“写得太确定”——以为指定一个名字、一个像素、一个数值就能稳住，结果换台机器就走样。