CSS：使用不同的字体对数字和文本进行样式 [英] CSS: Styling numbers and text with different fonts

问题描述

我想所有的数字和所有的标点符号在我的网站有一个font-family，而其余的文本有另一个。
（例如：Arial中的数字和标点符号以及Tahoma中的文本）

我可以为每个人做，但是它们是A LOT

解决方案

是否有更简单的方法？在我的情况下，网站做了一半，然后我需要更改字体的所有数字在整个网站。我需要将所有的数字更改为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： ，sans-serif; 到 font-family：Oxygen，Poppins，sans-serif;

新的font-family样式将Oxygen字体应用于所有文本，但是我们已经限制Oxygen字体只能使用 unicode-range 属性。对于除数字以外的所有其他文本，将应用Poppins字体。

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

I'd like that all the numbers and all the punctuation in my website have a font-family, while the rest of the text has another. (Example: numbers and punctuation in Arial and text in Tahoma)

I could do it for each of them, but they are A LOT, so this is not an option.

Is there an easier way?

解决方案

In my case the website was half done and then I needed to change font of all the numbers across the site. I need to change all the numbers to Oxygen font. This is how I did it.

/* 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;
}

And then replaced the font-family: "Poppins", sans-serif; to font-family: "Oxygen", "Poppins", sans-serif;

The new font-family style will apply Oxygen font to all the text but we have restricted Oxygen fonts to be applied to 0-9 numbers only using the unicode-range property. for all other text except numbers, Poppins font will be applied.

Note: U+30-39 is the range of 0-9 numbers.

这篇关于CSS：使用不同的字体对数字和文本进行样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！