网站字体应用之坑——font-family 篇

技术探索 > 前端工程 > 样式工程
2026, 简体中文
55 0.7~0.9 分钟 331

今天一位博客朋友向我反映：在使用我站点主题后行内代码块（code 标签）不能正常加载自定义字体。

定位问题

打开开发人员工具切换到“元素”面板，选择“已计算”。选择指定段落文字，在“已计算”搜索框随机输入字符以过滤属性值，即可看到最底下的“呈现的字体”。

我发现“呈现的字体”并非设定的字体，而是本地来源的 NSimSun（新宋体）。

保持在“元素”面板，选择“样式”，搜索 font-family。
发现 code 标签并未应用我设定的 body { font-family: ... }，而是应用了用户代理样式表的 code { font-family: monospace }。

发现问题

我再次从用户代理样式表学习。

来自 Chromium 的：

tt, code, kbd, samp {
    font-family: monospace
}

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
}

来自 Firefox 的：

tt,
code,
kbd,
pre,
samp,
listing,
xmp,
plaintext {
  font-family: -moz-fixed;
  /* Replace this with text-spacing:none when the shorthand is implemented: */
  text-autospace: no-autospace;
}

解决问题

问题已经很清楚了，只需要在原本的 body 指定外：

body {
  font-family: ...;
}

再给以下元素设置 font-family: inherit; 后，它们就会正常继承页面字体。

tt, code, kbd, samp, pre, xmp, plaintext, listing {
  font-family: inherit;
}

此外，也可以为它们单独设置等宽字体（monospace）。

1

推荐文章