Using Css, Is There Any Way To Display Different Characters Using Different Font?

My HTML text is just like this:

abcdefghijklmnopqrstuvwxyz

What I want is to display a-n using 'Times New Roman', and display o-z using 'Courier New', and this

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

Solution 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 − <alang=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.

Solution 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><spanclass="languageOne">abcdefghijklmn</span><spanclass="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; }