CSS：使用不同字体样式对数字和文本进行样式设置

Question

我希望我的网站中所有的数字和标点符号都有一种字体，而其他文本有另一种字体。（例如：Arial 中的数字和标点符号，Tahoma 中的文本）

我可以对每个元素进行设置，但它们实在太多了，这不是一个好选择。

是否有更简单的方法？

- Bonno

---

无法在CSS中完成。 - Nick

如果您使用字体编辑器创建了一个新字体，其中点/数字采用Arial字体，文本采用Tahoma字体，然后从中创建Web字体并将其用作正文字体，会怎样？ - passatgt

实际上可以使用unicode-range，但我不建议这样做，因为它仍处于实验阶段-https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range - Paulie_D

@ passatgt或者Tahoma Web字体，但不包括数字和标点符号，这样浏览器将用字体系列中列出的第二个字体替换缺少的字符？（我不确定它是否会起作用，但我认为应该）。 - pawel

是的，那也是一个很好的解决方案。 - passatgt

Answer 1

在我的情况下，这个网站已经完成了一半，然后我需要更改整个网站上所有数字的字体。我需要将所有数字更改为 Oxygen 字体。以下是我的做法。

/* latin-ext */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/LC4u_jU27qpsdszDEgeU_3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+30-39;
}

然后将font-family: "Poppins", sans-serif;替换为 font-family: "Oxygen", "Poppins", sans-serif;

新的字体样式将应用 Oxygen 字体到所有文本，但我们使用unicode-range属性限制 Oxygen 字体只能应用于0-9数字。对于除数字以外的所有文本，将应用 Poppins 字体。

注意：U+30-39是0-9数字的范围。

- vinesh

---

这对于一个完全完成的网站非常有帮助。 - SDIDSA

Answer 2

我发现最简单的方法是将&text012345689添加到从 Google Fonts 获取的 @import url 的末尾，就像这样：

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap&text=0123456789");

接下来你可以添加另一个用于文本的，导入方式与普通导入相同：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

然后在CSS中，您只需这样做就可以了，它将有效：

body {
  font-family: "Inconsolata", "Montserrat", sans-serif;
}

这将会把"Inconsolata"字体应用到所有数字上，而把"Montserrat"字体应用到其他文本上。

- Dremiq

---

这应该是正确的答案。如果您只需要更改1-2个实例，创建一个实用程序类可能会起作用，但这似乎是在整个站点更改所有数字的最佳解决方案。谢谢！ - esitarz

@esitarz 没问题，很高兴能帮到你！ - Dremiq

Answer 3

你可以为你的 body 设置一个字体，例如 Tahoma，然后将任何数字和标点符号包裹在一个 <span> 标签中，例如 <span class="numbers"></span>，然后使用 CSS 为 span 标签设置不同的字体，如下所示：

.numbers {
     font-family: Arial;
}

Here's an example:

body {
  font-family: Arial;
}
.numbers {
  font-family: Tahoma;
  color: red;
}

Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet <span class="numbers">123-456-789</span>. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum
dolor ismet. Lorem ipsum dolor ismet. <span class="numbers">"</span>Lorem ipsum dolor ismet<span class="numbers">"</span>. Hello World<span class="numbers">???????</span>

- Fahad Hasan

---

我可以为每个数字或标点符号单独添加一个 span，但它们实在太多了，所以这不是一个可行的选择。OP 表示无法对每个数字或标点符号都添加一个 span。 - Nick

Answer 4

最好的方法是创建两个类，一个用Arial，另一个用Tahoma。然后分配你想要的元素的类。

- Florin Pop