Question

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

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

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

（如果可能的话，我们希望不要诉诸于跨越每个英语单词的东西）

Answer 1

如果您希望跨浏览器工作，则无法使用类和字体标记每个语言部分。仅使用CSS无法完成。

您可以手动或自动应用语言课程。手动可能需要大量的工作来支持和维护，但是非常强大。动态地，可以使用后端脚本或Javascript，通过扫描字符串以查找属于某些unicode字符块的字符，并相应地应用语言类来完成。

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

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

Answer 2

为英文和日文文本创建css类。

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

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

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

Answer 3

我使用＆＃39; unicode-range＆＃39;解决了我的问题。 CSS属性。

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

示例：

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 4

您如何告诉该页面要在屏幕上打印哪种语言？

如果你得到一个变量，你不能将这个变量用作你用于div的一个类。

<body class="english">

或

<body class="japanese">

使用不同的字体为拉丁字符和日语字符与CSS

4 个答案: