css - 使用 CSS 为拉丁字符和日文字符使用不同的字体

Question

我们正在创建一个同时使用日语和英语的网站。我们想摆脱不能使用 ClearType 的默认日文字体。有没有办法告诉浏览器在同一页面上仅对日文字符(如 Meiryo)使用不同的日文字体，而仅对拉丁字符(如 Helvetica)使用另一种字体？我们不希望任何英文单词使用 Meiryo 字体。

我们实际上使用了一个技巧来首先在这篇文章的 CSS 中指定英文字体:http://www.lukew.com/ff/entry.asp?118

但是，这在 IE 中不起作用。即使我们先指定 Helvetica、Verdana 或任何其他广泛使用的字体，然后在 CSS 中指定日文字体，IE 仍将对英文单词使用日文字体。 Firefox、Chrome 等按预期工作。

(如果可能的话，我们希望不要求助于将每个英文单词包装在一个 span 中)

Answer 1

我已经使用“unicode-range”CSS 属性解决了我的问题。

您可以在此处找到详细信息: https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range

例子:

/* bengali */
@font-face {
  font-family: 'Atma';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
  unicode-range: u+0980-09FF;
}


body {
  font-family: 'Atma', arial, sans-serif;
  font-size: 18px;
}

<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>