无需枚举等宽标签，如何用HTML/CSS设置网站Noto Sans与Noto Sans Mono字体？

完全可以做到不用罗列所有等宽标签，核心思路是利用CSS对字体族的定义，把浏览器默认的等宽字体族monospace替换为你需要的Noto Sans Mono，同时给全局文本设置Noto Sans。

具体代码如下：

/* 全局文本默认使用Noto Sans */
body {
  font-family: 'Noto Sans', sans-serif;
}

/* 重新定义monospace字体族，将其指向Noto Sans Mono */
@font-face {
  font-family: monospace;
  src: local('Noto Sans Mono'), /* 优先使用本地安装的字体 */
       url('path/to/noto-sans-mono.woff2') format('woff2'); /* 本地没有则加载线上字体文件 */
}

为什么这个方法有效？ #

浏览器默认会给<code>、<pre>、<kbd>、<samp>等需要等宽字体的元素设置font-family: monospace;，通过重新定义monospace这个字体族的实际内容，所有依赖该字体族的元素都会自动使用Noto Sans Mono，无需手动枚举所有相关标签。

补充说明 #

• 如果你的Noto Sans和Noto Sans Mono是通过CDN引入的，需要先在HTML头部加载字体资源：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Mono&display=swap" rel="stylesheet">

• 上面的CSS中，local('Noto Sans Mono')是为了优先使用用户本地已安装的字体，减少加载请求；如果不需要本地字体，可以直接去掉这部分，只保留线上字体的URL。

内容的提问来源于stack exchange，提问作者salcc