我希望我的网站中所有的数字和标点符号都有一种字体,而其他文本有另一种字体。(例如:Arial 中的数字和标点符号,Tahoma 中的文本)
我可以对每个元素进行设置,但它们实在太多了,这不是一个好选择。
是否有更简单的方法?
在我的情况下,这个网站已经完成了一半,然后我需要更改整个网站上所有数字的字体。我需要将所有数字更改为 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数字的范围。
@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;
}
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>
unicode-range
,但我不建议这样做,因为它仍处于实验阶段-https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range - Paulie_D