css - @font-face fonts doesn't render consistently on all Android versions -
i'm trying use customized roboto font arabic fail rendered in phonegap/android application:
- on galaxy ace (android 2.3.2), application renders arabic characters (see image#1).
- on galaxy s3 , s4 (android 4.3), application renders arabic characters using default font (see image#2).
image#1
image#2
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 text in latin characters (dejavu serif).</pre> </div> </div> </body> </html>
try testing see if possibly issue <pre> tags and/or html:
<span class="arabictext">أنا نص بحروف عربية</span> <pre class="arabictext">أنا نص بحروف عربية</pre> <span class="arabictext">أنا نص بحروف عربية</span> <pre class="arabictext">أنا نص بحروف عربية</pre> if of render correctly on device in question maybe can narrow down issue.
another possibility strange thing encountered in browsers (seemingly @ random), fonts defined @font-face not render unless formatted font-family name exactly same including punctuation when using later. try wrapping font-family in quotes in instances:
@font-face { font-family: 'arabicfont'; /* has quotes */ src: url("fonts/kacsttitle.ttf") format("truetype"); } .arabictext { font-family: 'arabicfont'; /* has quotes */ direction: rtl; } or removing quotes in instances:
@font-face { font-family: arabicfont; /* no quotes */ src: url("fonts/kacsttitle.ttf") format("truetype"); } .arabictext { font-family: arabicfont; /* no quotes */ direction: rtl; } hopefully 1 of out. last thought - there possibly capitalization difference in file name between referencing , how it's saved?
Comments
Post a Comment