How to make a font-face render bigger?

Question

Using CSS, I am using this line to style a bilingual element:

 font-family:persianFont, englishFont;

Both persianFont and englishFont are defined with @font-face . The problem is that characters with englishFont are shown a little bigger, because the font has been created to be so. A sample sentence would be rendered like this:

BIG_ENGLISH_WORDS_small_persian_BIG_ENGLISH_AGAIN...

So, my question is how can I make persianFont a little bigger ( make it have a bigger scale ), so that a line of bilingual persian-english sentence is shown correctly both in the same size? Is this possible at all? Is there any other solution?

Thanks in advance

Answer 1

I suggest creating a span separately and increasing the font-size as an ideal solution.

If I assume your body is having a default font-size of 12px , then proportionately, you need to increase the span size.

For Instance,

span{
     font-size:14px;
}

From your example, for Instance,

<p>BIG_ENGLISH_WORDS_<span>small_persian</span>_BIG_ENGLISH_AGAIN...</p>

Hope this helps.

PS: You can do the same by creating a class or an id selector.

Answer 2

I finally understood what you meant. I think you should look at the unicode-range CSS property. It may not have adequate browser support yet but that also depends on your target audience. Chrome has prett ygood support at least.

I remember reading about it on 24ways.org. Here is an exercpt from an article by Drew McLellan ( http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/ )

The unicode-range descriptor is designed to help when using fonts that don't have full coverage of the characters used in a page. By adding a unicode-range property to a @font-face rule it is possible to specify the range of characters the font covers.

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF;
}

In this example, the font is to be used for characters in the range of U+00 to U+FF which runs from the unexciting control characters at the start of the Unicode table (symbols like the exclamation mark start at U+21 ) right through to ÿ at U+FF – the extent of the Basic Latin character range.

By adding multiple @font-face rules for the same family but with different ranges, you can build up complete coverage of the characters your page uses by using different fonts.

There is also a great article by Richard Ishida ) about unicode-range accompanied by a test case which I have posted on JsFiddle .

[edit]

So your next step is to identify the Unicode code points corresponding the the persian language and make a CSS rule, as described above, targeting those code-points and changing the font size accordingly.