Question

我希望我网站上的所有数字和所有标点符号都有字体系列，而文本的其余部分则有另一个。（示例：Aah中的数字和标点符号以及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;

新的font-family样式会将Oxygen字体应用于所有文本，但我们仅限于使用unicode-range属性将Oxygen字体应用于0-9数字。对于除数字之外的所有其他文本，将应用Poppins字体。

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

Answer 2

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

.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>

Answer 3

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

CSS：使用不同字体设置数字和文本

3 个答案: