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

标签 html css fonts

我希望我网站上的所有数字和所有标点符号都有一个字体系列,而其余文本有另一个字体系列。 (示例: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 数字。属性(property)。对于除数字以外的所有其他文本,将应用 Poppins 字体。

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

关于html - CSS:用不同的字体设计数字和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26628110/

相关文章:

c# - 获取 .ttf 文件的字体名称

javascript - 在不影响默认幻灯片大小的情况下更改单张幻灯片的大小

javascript - 在宏伟的弹出窗口初始化后记住悬停时的 div 顶部位置

css - 标题 css 中的网站名称?

javascript - Bootstrap Material 设计 - 波纹不显示在弹出窗口中

java - 为什么这个 TextArea 不返回非粗体格式,或者 Font.PLAIN 就像 "add-on"一样?

javascript - 有没有一种方法可以让表格只识别一个必填字段

html - 使用 sass 定位占位符文本

css - 即使 @grid-gutter-width 为 0,Bootstrap 3 列也不接触

css - Mozilla 上的字体 Gregor