在 HTML/CSS 中覆盖浏览器默认字体 - 但不是代码字体？

Question

比方说，我有一个简单的、无样式的 HTML 文档 - 像这样：

<h2>Hello world</h2>

<p><b>This</b> is <i>my</i> code example: <code>code_example.is_here("!")</code>

在 Firefox 上，呈现为：

因此，Firefox 选择了一些衬线字体（Firefox Inspector 告诉我它是 "DejaVu Serif"）作为默认文本字体 - 但选择了一种不同的字体，一种 typewriter/monospaced 字体，用于格式化 <code>（Firefox Inspector 告诉我它是 "DejaVu Sans Mono"）。

现在，我想做的是用不同的字体覆盖整个页面的默认文本字体，如下所示：

@font-face {
  font-family: "Comfortaa";
  /* src: url("../path/to/comfortaa.ttf") format("truetype"); // not using src here, as we load via fonts.googleapis.com for SO code snippet */
}

html *
{
  font-family: Comfortaa !important;
}

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<h2>Hello world</h2>

<p><b>This</b> is <i>my</i> code example: <code>code_example.is_here("!")</code>

... 在 Firefox 中呈现如下：

...但是，如您所见，该覆盖还覆盖了 <code>.

的字体

所以，我想做的是，只覆盖默认文本（最初是衬线字体）- 但保留 <code> 中使用的字体。

如何使用 CSS 执行此操作？

编辑：按照我的表述方式，解决方案可能只是覆盖 <p> 元素；但假设通常 HTML <body> 标签中可能直接有 "wild" 文本。 <code> 也可能作为 <p> 的子代出现，但它也可能是 <body>.

的直接子代

Answer 1

使用 :not() 排除 code 元素（和 pre，如以下评论所述）

您还可以通过链接 :not() 伪类

来排除多个特定标签名称

html *:not(code):not(pre) {
  font-family: Arial
}

<p>This font is in Arial</p>

<code>Code is not in Arial</code>

<pre>Pre is not in Arial</pre>

在 HTML/CSS 中覆盖浏览器默认字体 - 但不是代码字体？

Override the browser default font - but not the code font - in HTML/CSS?

html

css

fonts