html - CSS:用不同的字体设计数字和文本

Question

我希望我网站上的所有数字和所有标点符号都有一个字体系列，而其余文本有另一个字体系列。(示例:Arial 中的数字和标点符号以及 Tahoma 中的文本)

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

有没有更简单的方法？

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 数字。属性(property)。对于除数字以外的所有其他文本，将应用 Poppins 字体。

注:U+30-39为0-9数字范围