CSS：使用不同字体为数字和文本设置样式答案

【问题标题】：CSS: Styling numbers and text with different fontsCSS：使用不同字体为数字和文本设置样式
【发布时间】：2021-08-14 09:51:48
【问题描述】：

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

我可以为他们每个人都这样做，但他们很多，所以这不是一个选择。

有没有更简单的方法？

【问题讨论】：

不能在 CSS 中完成，
实际上它可以使用unicode-range，但我不会因为它仍然是实验性的-developer.mozilla.org/en-US/docs/Web/CSS/unicode-range
@passatgt 或者 Tahoma webfont 没有数字和标点符号，所以浏览器会用 font-family 中列出的第二种字体替换缺少的字符？（我不确定它会起作用，但我认为它应该）。
是的，这也是一个很好的解决方案

标签： html css fonts

【解决方案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 字体应用于所有文本，但我们已将 Oxygen 字体限制为仅使用 unicode-range 属性应用于 0-9 数字。对于除数字以外的所有其他文本，将应用 Poppins 字体。

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

【讨论】：

这对于一个完全完成的网站很有帮助

【解决方案2】：

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

.numbers {
     font-family: Arial;
}

这是一个例子：

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>

【讨论】：

I could do it for each of them, but they are A LOT, so this is not an option. OP 说不能为每个数字或标点符号添加跨度。

【解决方案3】：

我发现的最简单的方法就是将 &text012345689 添加到您从 Google 字体获得的 @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”字体应用于您的所有其他文本。

【讨论】：

这应该是正确的答案。如果您需要更改 1-2 个实例，创建实用程序类可能会起作用，但这似乎是更改站点中所有数字的最佳解决方案。谢谢！
@esitarz 没问题，很高兴我能帮助你！

【解决方案4】：

最好的方法是创建 2 个类，一个使用 Arial，一个使用 Tahoma。然后指定你想要什么元素的类。

【讨论】：