使用CSS，有什么方法可以使用不同的字体显示不同的字符? [英] Using CSS, is there any way to display different characters using different font?

问题描述

我的HTML文本就是这样:

My HTML text is just like this:

<p>abcdefghijklmnopqrstuvwxyz</p>

我想要使用"Times New Roman"显示a-n，并使用"Courier New"显示o-z，这应该使用CSS来完成，例如，不要更改HTML文本.

What I want is to display a-n using "Times New Roman", and display o-z using "Courier New", and this should be done using CSS, say, with no change to the HTML text.

简单地说，我希望CSS自动 选择与它是哪个字符相对应的指定字体.
a-n应该使用"Times New Roman"显示；
o-z应当使用"Courier New"显示.

Simply stated, I want CSS to automatically choose the specified font corresponding to which character it is.
a-n should be displayed using "Times New Roman";
o-z shoule be displayed using "Courier New".

有什么办法可以做到这一点?

Is there any way to accomplish this?

如果可以解决此问题，则可以解决另一个问题:使用不同的字体显示不同的语言.

If this problem can be solved, another problem can be solved: display different language using different font.

推荐答案

是的，可以使用称为 unicode-range 的东西在所有现代Web浏览器中运行:

Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

顺便说一句，有关更多信息，请参见 http://24ways.org/2011/unicode-range

BTW, more info about this from 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>​

这篇关于使用CSS，有什么方法可以使用不同的字体显示不同的字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！