我的 HTML 文本是这样的：
<p>abcdefghijklmnopqrstuvwxyz</p>
我想要的是使用“Times New Roman”显示 a-n，并使用“Courier New”显示 o-z，这应该使用 CSS 来完成，例如，不更改 HTML 文本。
简单地说，我希望 CSS 能够自动选择对应于哪个字符的指定字体。
a-n 应使用“Times New Roman”显示；
o-z 应使用“Courier New”显示。
有没有办法做到这一点？
如果能解决这个问题，就可以解决另一个问题：用不同的字体显示不同的语言。
【问题讨论】：
标签： html css fonts typography
是的，你可以，使用名为 unicode-range 的东西，它适用于所有现代网络浏览器：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
顺便说一句，更多信息来自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>
【讨论】：
如果字符属于不同的书写系统，例如拉丁语和希伯来语，或者西里尔语和希腊语，浏览器通常会自动为它们使用不同的字体。但是，这只发生在页面未指定字体的情况下，即这仅与默认字体有关，并且使用的字体由浏览器默认值和用户控制的浏览器设置决定。
虽然 JayC 的回答中描述的技术提供了部分解决方案，但通过在标记中区分不同语言的文本，您可以获得更好的浏览器覆盖率。在双语文档中，对其中一个文本使用标记就足够了（出于实际原因，使用较少的文本）。在 gutch 的回答中使用 class 可以提供最佳覆盖率，但现在对 CSS 中语言选择器的支持非常普遍，您可能会考虑使用更合乎逻辑的 lang 属性，例如
<h1>Hello − <a lang=ru>Привет</а></h1>
然后你会使用类似的规则
[lang=ru] { font-family: ...; }
（我的示例有效地将<a> 元素用作<span> 的较短变体。正式地说，这只有在文本不在外部<a> 元素内时才有可能。）
但是，对于视觉风格，需要与按语言选择字体相反。如果“Hello”中的“e”与同一行中“Привет”中的西里尔字母“е”不同，这看起来真的很奇怪。如果可能的话，对文档中的所有语言使用相同的字体几乎总是更好。这意味着选择一种适用于所有人的字体。
【讨论】：
您不能使用 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; }
【讨论】：