更新了示例的正确链接
我正在使用与 CSS 捆绑在一起的 Hugo 主题，并使用 Highlight.JS 进行语法高亮显示。我创建的网页在代码块中显示了基于普通“ express ”的固定宽度字体 see here for example of my site page
我想使用另一种字体，如 sans-mono 或更整洁的字体，如 Highlight.JS 网页上显示的那样 here
我对 Javascript 和 CSS 不是很熟悉，只是尝试使用它们。有没有更简单的方法告诉 Highlight.JS 使用特定字体？假设我有可用的字体文件。
谢谢 泽凯
最佳答案
将此添加到您的 CSS:
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
这将使用该列表中用户系统上可用的第一个字体。有时字体的间距与其真实名称不同，例如 "Sans Mono"不行，试试"SansMono" .确保输入 monospace最后，如果用户没有任何列出的字体，至少可以选择一些合适的字体。
如果这不起作用，可能是由于选择器特异性问题，其中 highlight.js 提供的默认样式覆盖了您自己的样式。有助于避免这种情况的方法是将 <link>在加载 highlight.js CSS 文件之后加载你的 CSS 文件。如果这不起作用，您将不得不制作 pre > code选择器更具体，例如将其更改为 #main pre > code如果所有页面内容都包含在 ID 为 main 的元素中.
如果您不确定如何添加 CSS，最简单的方法是将其放在由 <style></style> 包围的 HTML 模板中标签。虽然最好将它放在 CSS 文件中并用 <link rel="stylesheet" href="myStyles.css"> 引用它.
关于javascript - 如何在 highlight.js 中使用特定字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37426778/