lenguaje - html lang en html5
Selección de diferentes glifos para diferentes idiomas. (4)
¿Alguien podría explicarme por qué cuando configuro lang="ar" la familia de fuentes selecciona la fuente sans-serif mientras que cuando es lang="en" selecciona Open Sans ?
<html lang="ar">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', sans-serif;">
السلام عليكم
</body>
</html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', sans-serif;">
السلام عليكم
</body>
</html>
El algoritmo de respaldo depende completamente del proveedor , por lo que cada navegador puede diferir en su propia implementación.
¿Qué pasa comúnmente?
- Defina su lista de
fontFamily:a, b, c, d;
Esta lista se basa en la prioridad, por lo tanto, el navegador buscará desde l0 => ln .
-
glyph lookup step: TextEngine intenta dibujar el texto teniendo en cuenta la lista dada y se repleta con gracia del0aln.
Debido a que su texto السلام عليكم no se puede representar con su primera familia de fuentes preferida, se recurre a any sans-serif
Puede encontrar una explicación más detallada aquí: https://.com/a/29242255/4099454
Lo que está pasando es que los caracteres árabes no son compatibles con Open Sans . Así que en ambos fragmentos, Open Sans no se aplica en absoluto, y el navegador va directamente a la fuente alternativa.
La razón por la que la fuente se ve diferente en ambos fragmentos es porque en su primer fragmento, el navegador sabe que el idioma es el árabe debido a la etiqueta lang . Le pide al sistema la mejor fuente de respaldo de sans-serif para el árabe , y en una Mac es Geeza Pro Regular.
En su segundo fragmento, el navegador piensa que el idioma es el inglés y solicita la mejor sans-serif para el inglés . En Mac, este es Arial.
Al parecer, tanto Geeza Pro como Arial admiten el texto en árabe, pero según el idioma real, el sistema elige uno sobre el otro.
No todas las fuentes contienen todos los caracteres. Lo más probable es que Open Sans no incluya los caracteres correctos para ese idioma, por lo que el navegador se ubicará en la siguiente fuente en línea, y así sucesivamente hasta que encuentre las fuentes del sistema que puedan tener el carácter que necesita. Finalmente, si todo lo demás falla, obtienes "tofu", generalmente un cuadro vacío, un cuadro con una X o un cuadro que contiene el código hexadecimal del personaje.
Puede encontrar más información en la especificación oficial CSS Fonts Module Level 3 W3C: https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm .
Por razones desconocidas, el carácter ''-'' de sans-serif fue un problema para el idioma árabe, ahora todo funciona ^^
<html lang="ar">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', ''sans-serif'';">
السلام عليكم
</body>
</html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', ''sans-serif'';">
السلام عليكم
</body>
</html>
<html lang="it">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', ''sans-serif'';">
السلام عليكم
</body>
</html>
<html lang="zu">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body style="font-family: ''Open Sans'', ''sans-serif'';">
السلام عليكم
</body>
</html>