Using separate fonts for two different languages

2019-04-17 11:00发布

问题:

I'm trying to use two different fonts for two different languages. But both fonts are overlapping eachother hence causing difficulty in reading the text. Here is what I am trying;

CSS:

@font-face {
       font-family: 'Jameel Noori Nastaleeq';
       src: url(../../../fonts/Jameel Noori Nastaleeq.ttf)
}

and then in the area where my text is written this CSS class has been used:

CSS:

.post_body {
    padding: 5px;
    font-size: 17px;
    font-family: Tahoma, Jameel Noori Nastaleeq;
}

The issue is, when I use URDU text in my post it shows correct font style, however when I use ENGLISH text then it doesn't uses Tahoma font style.

Please help on how to use two different font styles for two different languages in the same area?

回答1:

You should start by setting the language of the html... ...or the language of the element.

<!-- html -->
<html lang="en">


/* CSS */
.post_body {
    /* common style stuff -- don't set font-family here */
}

:lang(en) .post_body {
    font-family : Tahoma;
}

Then use JS to change the document.documentElement.lang property.

That, of course, is if the whole page is changing language.

If you want to have some posts in Urdu and some posts in English at the same time, set

<article class="post_body" lang="en">

.post_body:lang(en) { font-family : Tahoma; }