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

Question

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.

Answer 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>​

Answer 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.