Using CSS, is there any way to display different characters using different font?

问题

My HTML text is just like this:

<p>abcdefghijklmnopqrstuvwxyz</p>

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.

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.

回答1:

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

BTW, more info about this from http://24ways.org/2011/unicode-range

Live example: 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>​

回答2:

If the characters belong to different writing systems, such as Latin and Hebrew, or Cyrillic and Greek, browsers often automatically use different fonts for them. However, this only happens to the extent that the page does not specify fonts, i.e. this relates to default fonts only, and the fonts used are determined by browser defaults and browser settings controlled by the user.

Although the technique described in JayC’s answer gives a partial solution, you get much better browser coverage by distinguishing the texts in different languages in markup. In a bilingual document, it suffices to use markup for texts in one of them (the one used less, for practical reasons). Using class as in gutch’s answer gives best coverage, but nowadays support to language selectors in CSS is so widespread that you might consider using the more logical lang attribute instead, e.g.

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

Then you would use rules like

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

(My example uses an <a> element effectively as a shorter variant of <span>. Formally, this is possible only when the text is not inside an outer <a> element.)

However, for visual style, just the opposite of font selection by language would be needed. It really looks odd if the “e” in “Hello” is different from the Cyrillic “е” in “Привет” on the same line. It is almost always better to use the same font for all languages in a document, if possible. This means selecting a font that works for all of them.

回答3:

You can't use CSS to change the font of particular characters as you describe, because the CSS selectors don't select individual characters — they select HTML elements.

So you would need to create elements around the blocks of text that need specific fonts. Ideally you would do that in server-side code, though I don't know whether that's practical for you. Your server would need to output HTML like this:

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

Then you apply the fonts as appropriate in your CSS:

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

来源：https://stackoverflow.com/questions/10021959/using-css-is-there-any-way-to-display-different-characters-using-different-font