更新了示例的正确链接
我正在使用与 CSS 捆绑在一起的 Hugo 主题，并使用 Highlight.JS 进行语法高亮显示。我创建的网页在代码块see here for example of my site page
中显示了基于普通“信使”的固定宽度字体我想使用另一种字体，例如 sans-mono 或更简洁的字体，例如在 Highlight.JS 网页上显示的 here
我对 Javascript 和 CSS 不是很熟悉，只是尝试使用它们。有没有更简单的方法告诉 Highlight.JS 使用特定字体？假设我有可用的字体文件。
谢谢 齐凯
【问题讨论】：
标签： javascript css highlight.js hugo
将此添加到您的 CSS：
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
这将使用该列表中用户系统上可用的第一个字体。有时字体的间距与其真实名称不同，例如，如果"Sans Mono" 不起作用，请尝试"SansMono"。确保将monospace 放在最后，以便在用户没有任何列出的字体时至少选择一些合适的字体。
如果这不起作用，可能是由于选择器的特殊性问题，highlight.js 提供的默认样式覆盖了您自己的样式。有助于避免这种情况的方法是将加载 CSS 文件的 <link> 放在加载 highlight.js CSS 文件的文件之后。如果这不起作用，则必须使 pre > code 选择器更具体，例如，如果所有页面内容都包含在 ID 为 main 的元素中，则将其更改为 #main pre > code。
如果您不确定如何添加 CSS，最简单的方法是将其放入由<style></style> 标签包围的 HTML 模板中。虽然最好将其放在 CSS 文件中并使用 <link rel="stylesheet" href="myStyles.css"> 引用它。
【讨论】：
font-family: "Monaco", "Consolas", "Ubuntu Mono", "Courier New", monospace;，而不是显示更好的单声道字体。但这引出了一个问题，即该行正在加载本地安装在我的计算机上的字体，而不是我与我的网站捆绑在一起的网络字体。如何在此处强制使用网络字体？这很重要，因为我需要它跨平台保持一致。再次感谢！
font-family 中可以通过网络字体中指定的名称进行引用。检查您获得网络字体的文档——您通常可以使用明显的名称"Sans Mono" 来引用该字体，但有些来源需要调用类似"Sans+Mono" 或"SansMono_400" 之类的字体。您仍然应该在列表后面指定本地可用的后备字体——它们将在加载网络字体时使用。