6

我的 HTML 文本是这样的：

<p>abcdefghijklmnopqrstuvwxyz</p>

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

简单来说，就是想让 CSS自动选择对应哪个字符的指定字体。
an 应使用“Times New Roman”显示；
oz 应使用“Courier New”显示。

有没有办法做到这一点？

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

4

3 回答 3

9

是的，您可以使用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>​
于 2012-04-05T03:13:33.250 回答
3

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

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

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

然后你会使用像这样的规则

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

（我的示例<a>有效地将元素用作 的较短变体<span>。形式上，这仅在文本不在外部<a>元素内时才有可能。）

然而，对于视觉风格，将需要与按语言选择字体相反。如果“Hello”中的“e”与同一行的“Привет”中的西里尔字母“е”不同，这看起来真的很奇怪。如果可能，对文档中的所有语言使用相同的字体几乎总是更好。这意味着选择一种适用于所有人的字体。

于 2012-04-05T04:33:41.360 回答
1

您不能使用 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; }
于 2012-04-05T02:57:40.777 回答