使用另一种字体样式来美化数字

Question

我有一个带有自定义阿拉伯字体的网页，但是该字体中的数字以阿拉伯文显示，并不清晰，因此我想使用Arial字体（仅限数字）来显示它？

我尝试了以下方法但并没有起作用：

@font-face {
  font-family: Arial, Helvetica, sans-serif !important;
  src: local("Arial"), local("Arial");
  font-style: normal;
  unicode-range: U+30-39;
}

- 7usien

Answer 1

你需要命名你的unicode范围特定字体。

简单来说，我指示浏览器为所有应用的字形使用“test”字体，然后回退到“Ballet”。

@import url('https://fonts.googleapis.com/css2?family=Ballet&display=swap');

@font-face {
  font-family:  'test';
  src: local("Arial");
  font-style: normal;
  unicode-range: U+30-39;
}


p {
  font-size: 4em;
  font-family: test, 'Ballet', cursive;
}

<p>Hi there! 1 2 3 4 5</p>

- Despina Kastani

---

我在页面上使用自定义字体，但需要一个特定的字体仅用于页面上的数字？ - 7usien

所以在你的body标签中，我会添加类似这样的内容：font-family: test, myCustomFont。 - Despina Kastani

它在Firefox上运行良好，但在Chrome上不行，因为我正在使用最新版本，应该支持吧？！ - 7usien

我在Chrome上测试了附加的代码片段，所以我不确定你的问题是什么。 - Despina Kastani

Answer 2

如果我理解正确，您需要在@font-face声明中设置unicode-range，然后为使用该字体的元素（body等）指定font-family：

我创建了两个示例，一个混合了Arial和Helvetica，另一个混合了Arial和Comic Sans MS，因为这样更容易看到区别。

@font-face {
  font-family: 'myNumbers';
  src: local('Arial');
  unicode-range: U+30-39;
}

p {
  font-size: 2em;
}

.mixed {
  font-family: myNumbers, Helvetica;
}

.mixedComic {
  font-family: myNumbers, 'Comic Sans MS';
}

.arial {
  font-family: Arial;
}

.helvetica {
  font-family: Helvetica
}

<p class="mixed">
  Hello, I am 123 and 456 with Arial for Numbers and Helvetica for Text
</p>

<p class="mixedComic">
  Hello, I am 123 and 456 with Comic Sans MS as Text and Arial for Numbers
</p>

<p class="arial">
  Hello, I am 123 and 456 in arial only
</p>

<p class="helvetica">
  Hello, I am 123 and 456 in helvetica only
</p>

- cloned