Using separate fonts for two different languages

2019-04-17 11:25发布

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?

标签： html css fonts font-face

1条回答

一纸荒年 Trace。

2楼-- · 2019-04-17 11:44

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; }

0人赞添加讨论(0) 举报