Using CSS, is there any way to display different characters using different font?
css, fonts, html, typography
Solution
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>
Problem
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.