CSS如何定义网页的基础字体样式_设置body标签的font-family属性

张开发
• 2026/4/18 17:54:08 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

CSS如何定义网页的基础字体样式_设置body标签的font-family属性
font-family 必须从具体字体到通用字体如sans-serif以确保正确回退中文字体名含空格需加英文引号子元素如input会覆盖body设置建议全局重置为inherit推荐写法按系统分组并以sans-serif结尾。font-family 设置顺序为什么必须从具体到通用浏览器不会自动帮你 fallbackfont-family 列表里靠前的字体一旦匹配成功后面的就彻底不看了。所以你写 Microsoft YaHei, PingFang SC, sans-serifWindows 用户看到微软雅黑Mac 用户看到苹方Linux 或旧系统用户才兜底到默认无衬线字体。常见错误是把 sans-serif 放最前或者中间漏掉逗号——比如写成 Helvetica Neue Arial sans-serif这会直接让整个声明失效浏览器退回到 UA 默认字体通常是 Times New Roman。中文字体名含空格必须加英文引号如 Hiragino Sans GB英文字体如 Helvetica、Arial 可不加但统一加更安全避免用系统已淘汰的字体比如 SimSun 在 macOS 和新 Linux 上根本不存在纯属摆设不要依赖“用户装了某字体”——哪怕你本地有 Noto Sans CJK SC线上用户大概率没有body 上设置 font-family 为什么经常被子元素覆盖因为 CSS 继承不是无条件的只有明确声明为「可继承」的属性才会下传font-family 是可继承的但一旦某个子元素比如 button、input、code自己写了 font-family就会完全屏蔽 body 的设置。典型场景是表单控件——浏览器 UA 样式表里input 和 textarea 默认带 font-family: monospace 或系统等宽字体直接覆盖 body 的设定。立即学习“前端免费学习笔记深入” There’s An AI For That 全球领先的 AI 聚合器收集10,225个AI工具可用于超过2,548个任务。

更多文章