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

Question

My HTML text looks like this:

<p>abcdefghijklmnopqrstuvwxyz</p>

I want to show an using "Times New Roman" and display oz with "Courier New", and this should be done using CSS, say, without changing the HTML text.

Simply put, I want CSS to automatically select the specified font that matches the character that it is.
an should be displayed using "Times New Roman",
oz shoule will be displayed using "Courier New".

Is there any way to do this?

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

Answer 1

It looks like you can, at least in some browsers, use something called unicode-rangeWelll, this works in Chrome and, surprisingly, IE. There is no such luck with Firefox and Opera.

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

Real-time 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

, , , . , , .. , , .

, JayCs, , , . (, ). class, gutchs, , CSS , lang, .

<h1>Hello − <a lang=ru></></h1>

,

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

( <a> <span>. , <a>.)

, . , "e" "" "" "" . , . , .

Answer 3

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; }