Las fuentes @ font-face no se muestran de forma consistente en todas las versiones de Android

Estoy tratando de utilizar una fuente Roboto personalizada para el árabe, pero no conseguir que se preste correctamente en una aplicación PhoneGap / Android:

  • En Galaxy ACE (Android 2.3.2), mi aplicación representa correctamente caracteres árabes (ver imagen # 1).
  • En Galaxy S3 y S4 (Android 4.3), mi aplicación procesa caracteres árabes usando la fuente predeterminada (ver imagen # 2).

Imagen # 1

introduzca la descripción de la imagen aquí

Imagen # 2

introduzca la descripción de la imagen aquí

página html

<!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> 

Intente probar algo como esto para ver si es posiblemente un problema con etiquetas <pre> y / o 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> 

Si alguno de los que hacen correctamente en el dispositivo en cuestión tal vez puede ayudar a reducir el problema.

Otra posibilidad es una cosa extraña que encontré recientemente donde en ciertos navegadores (aparentemente al azar), las fuentes definidas por @font-face no se renderizarían a menos que formatee el nombre de la font-family exactamente igual, incluyendo la puntuación cuando lo use más tarde. Así que puedes intentar envolver la font-family entre comillas en todas las instancias:

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

O quitar citas en todas las instancias:

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

Esperemos que uno de ellos le ayudará. Pensamiento pasado – ¿hay posiblemente una diferencia de mayúsculas en el nombre del archivo entre lo que está haciendo referencia y cómo se guarda realmente?

  • ¿Cómo agregar la función en el botón en phonegap?
  • ¿Hay una manera de pasar un mensaje de un navegador de Android a una aplicación?
  • Cómo acceder a la cámara específica en el teléfono móvil a través de html5
  • La propiedad webkitForce del evento táctil: Feedback de presión de los dedos. Buscando documentación
  • ¿Por qué se eliminó el soporte de los Trabajadores Web HTML5 del navegador de Android en las versiones 2.2 y superiores?
  • ¿Cuáles son las características específicas de iPhone / Android?
  • Obtener Android para tratar HTML Seleccionar como Android Spinner?
  • Android: "No se pudo ejecutar 'reproducir' en 'HTMLMediaElement': la API sólo puede iniciarse con un gesto del usuario
  • PhoneGap - Teclado hace que la pantalla se vuelva negra y flickery durante algún tiempo en Samsung Galaxy Tab 10.1
  • ToDataURL no funciona en los navegadores Android
  • Cómo reproducir video HTML5 mp4 en Android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.