使用CSS对拉丁字符和日文字符使用不同的字体

Question

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

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

然而，这在IE中不起作用。即使我们首先在CSS中指定Helvetica、Verdana或任何其他广泛使用的字体，然后在CSS中指定日语字体，IE仍然会对英文单词使用日语字体。Firefox、Chrome等浏览器的工作方式与预期一致。

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

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>

​

Answer 2

如果你想跨浏览器工作，你就不能用类和字体来标记每个语言部分。这不能只用CSS来完成。

您可以手动或自动应用语言类。手动支持和维护可能会有很多工作，但它很健壮。它可以动态地使用后端脚本或Javascript完成，方法是扫描字符串以查找落入特定unicode字符块的字符，并相应地应用语言类。

你可以在这里找到块定义(日语是平假名和片假名)：http://www.fileformat.info/info/unicode/block/index.htm

我建议使用后端方法，因为在页面加载期间更改页面上的字体可能会导致元素闪烁或移动。

Answer 3

创建英语和日语文本的css类。

.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }

如果整个页面是日语的，则在body标签中添加class="ja“，如果存在混合内容，则在包含日语文本的html元素中添加class="ja”，例如：

<td class="ja">日本語</td>