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
- Tome una foto de html5
- HTML5 <audio> etiqueta que no funciona en Android Webview
- ¿Existe una guía para desarrolladores de navegadores integrada de Android? ¿Dónde buscar las diferencias entre motores JS?
- Compartir a través de (facebook, twitter ...) en Android Phonegap APP
- Reproducir Youtube HTML5 incrustado de vídeo en Android WebView
Imagen # 2
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>
- Reproducir vídeo en pantalla completa en Android con reproductor de vídeo nativo
- Cómo grabar audio en la página web (iOS, Android, PC / Mac) - sin flash
- Cómo agregar a 'Añadir a pantalla de inicio' emergente para Android móvil
- Cómo obtener net :: ERR_UNKNOWN_URL_SCHEME mientras llama al número de teléfono de la página HTML en Android
- Elemento HTML5 <video> en Android
- Android HTML5 video - funciona al hacer clic en play, pero no video.play ()
- ¿Cómo puedo implementar la arquitectura MVC con JQuery móvil
- WebSocket HTML5 en el teléfono para Android
Intente probar algo como esto para ver si es posiblemente un problema con etiquetas <pre>
y / o html
:
<span class="arabicText">أنا نص بحروف عربية</span> <pre class="arabicText">أنا نص بحروف عربية</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?
- Compartir descriptores de archivos de memoria compartida en aplicaciones / procesos android utilizando el archivo de enlace
- ¿Cuál es el número mínimo de pasos para obtener el soporte completo de javadoc con las nuevas opciones de proyecto predeterminadas?