Question

我的HTML文字就像这样：

<p>abcdefghijklmnopqrstuvwxyz</p>

我想要的是使用“Times New Roman”显示a-n，并使用“Courier New”显示o-z，这应该使用CSS来完成，比如说，不会改变HTML文本。

简单地说，我希望CSS能够自动选择与其所属字符对应的指定字体。
应使用“Times New Roman”显示a-n;
使用“Courier New”显示o-z shoule。

有没有办法实现这个目标？

如果可以解决这个问题，可以解决另一个问题：使用不同的字体显示不同的语言。

Answer 1

看起来你可以，至少在某些浏览器中，使用名为unicode-range Welll的东西，这可以在Chrome中使用，而且令人惊讶的是IE。 Firefox和Opera没有这样的运气。

BTW，有关http://24ways.org/2011/unicode-range

的更多相关信息

实例：http://jsfiddle.net/jfcox/3LQyr/

<style>
@font-face {
    font-family: Foobar;
    src: local('Times New Roman');
    unicode-range: U+61-6E;
}
@font-face {
    font-family: Foobar;
    src: local('Arial');
    unicode-range: U+6F-7A;
}
body{
  font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>

Answer 2

如果角色属于不同的书写系统，例如拉丁语和希伯来语，或西里尔语和希腊语，浏览器通常会自动使用不同的字体。但是，这仅在页面未指定字体的范围内发生，即这仅与默认字体有关，并且使用的字体由用户控制的浏览器默认值和浏览器设置确定。

尽管JayC的答案中描述的技术提供了部分解决方案，但通过在标记中区分不同语言的文本，您可以获得更好的浏览器覆盖率。在双语文档中，对其中一个文本使用标记就足够了（由于实际原因，使用较少的文本）。在gutch的答案中使用class可以获得最佳覆盖率，但现在对CSS语言选择器的支持非常普遍，您可以考虑使用更符合逻辑的lang属性，例如。

<h1>Hello − <a lang=ru>Привет</а></h1>

然后你会使用像

这样的规则

[lang=ru] { font-family: ...; }

（我的示例有效地使用<a>元素作为<span>的较短变体。正式地说，只有当文本不在外部<a>元素内时才可能这样做。）

然而，对于视觉风格，只需要按语言选择字体。如果“Hello”中的“e”与同一行中“Привет”中的Cyrillic“е”不同，那真的很奇怪。如果可能的话，对文档中的所有语言使用相同的字体几乎总是更好。这意味着选择适用于所有这些字体的字体。

Answer 3

您无法使用CSS更改所描述的特定字符的字体，因为CSS选择器不会选择单个字符 - 它们会选择HTML元素。

因此，您需要在需要特定字体的文本块周围创建元素。理想情况下，您会在服务器端代码中执行此操作，但我不知道这对您是否实用。您的服务器需要输出这样的HTML：

<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p>

然后在CSS中适当地应用字体：

.languageOne { font-family: "Times New Roman", serif; }
.languageTwo { font-family: "Courier New", monospace; }

使用CSS，有没有办法使用不同的字体显示不同的字符？

3 个答案: