All geek questions in one place

@ font-face fonts do not appear consistently on all versions of Android

I am trying to use an individual Roboto font for the Arabic language, but could not display it correctly in the PhoneGap / Android application:

  • In Galaxy ACE (Android 2.3.2), my application displays the correct Arabic characters (see image # 1).
  • On Galaxy S3 and S4 (Android 4.3), my application displays Arabic characters using the default font (see image # 2).

Image # 1

enter image description here

Image # 2

enter image description here

html page

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    @font-face {
        font-family: 'ArabicFont';
        src: url("fonts/KacstTitle.ttf") format("truetype");
    }
    @font-face {
        font-family: 'LatinFont';
        src: url("fonts/DejaVuSerif.ttf") format("truetype");
    }

    .arabicText {
        font-family: ArabicFont;
        direction: rtl;
    }
    .latinText {
        font-family: LatinFont;
        direction: ltr;
    }
    .center {
        text-align: center;
    }
    </style>

</head>

<body>
    <div id="main">
        <div id="libreOfficeRendering" class="center">
            <hr/>
            <label>LibreOffice Rendering</label>
            <hr/>
            <img src="images/libreOfficeRendering.png">
        </div>
        <br/>
        <br/>

        <div id="googleChromeRendering" class="center">
            <hr/>
            <label>Google-Chrome Rendering</label>
            <hr/>
            <img src="images/googleChromeRendering.png">
        </div>
        <br/>
        <br/>

        <div id="androidAndPhoneGabRendering" class="center">
            <hr/>
            <label>Actual Rendering</label>
            <hr/>
            <pre class="arabicText">أنا نص بحروف عربية (KacstTitle).</pre>
            <pre class="latinText">I'm a text in Latin characters (DejaVu Serif).</pre>
        </div>
    </div>
</body>

</html>
+4
source share
1 answer

Try testing something like this to see if this is possible with tags <pre>and / or html:

<span class="arabicText">&#x623;&#x646;&#x627; &#x646;&#x635; &#x628;&#x62D;&#x631;&#x648;&#x641; &#x639;&#x631;&#x628;&#x64A;&#x629;</span>

<pre class="arabicText">&#x623;&#x646;&#x627; &#x646;&#x635; &#x628;&#x62D;&#x631;&#x648;&#x641; &#x639;&#x631;&#x628;&#x64A;&#x629;</pre>

<span class="arabicText">أنا نص بحروف عربية</span>

<pre class="arabicText">أنا نص بحروف عربية</pre>

- , , .

- , , ( , ) , @font-face, , font-family , . font-family :

@font-face {
    font-family: 'ArabicFont'; /* has quotes */
    src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
    font-family: 'ArabicFont'; /* has quotes */
    direction: rtl;
}

:

@font-face {
    font-family: ArabicFont; /* no quotes */
    src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
    font-family: ArabicFont; /* no quotes */
    direction: rtl;
}

, . - , ?

0

Source: https://habr.com/ru/post/1530410/

More articles:


All Articles