Using CSS, is there any way to display different characters using different font?
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>
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.