Sustitución de fuentes en CSS: glifos
CSS dispone de un mecanismo de sustitución de fuentes. En la propiedad font-family podemos especificar las que queramos utilizar, por orden de preferencia. Si alguna no se encuentra instalada en el sistema operativo, se comprueba la siguiente, y así sucesivamente. Al principio pensaba que la funcionalidad se reducía a eso, pero hay algo mucho más interesante: la sustitución también funciona carácter a carácter, o, expresándonos con corrección, glifo a glifo. En W3C se menciona (punto 5):If no matching face exists or the matched face does not contain a glyph for the character to be rendered, the next family name is selected…Nosotros, los «occidentales», compartimos en muchos idiomas el alfabeto romano, también conocido como latino. Hay alguna que otra peculiaridad, como los acentos graves y cedilla en francés, la eñe en español… pero poco más. Todas las fuentes tienen representaciones para los glifos del alfabeto romano. Pero, ¿qué ocurre con, por ejemplo, los ideogramas chinos, o japoneses? Hay unos cuantos cientos de ellos. La respuesta es que esos glifos, simplemente, no están presentes en muchas de las fuentes que conocemos. Tomemos, por ejemplo, la siguiente línea:
font: 16px Cambria, Georgia, "Times New Roman", Times, serif;Imaginemos que mezclamos español y japonés. Si Cambria está instalada en nuestro sistema, todo el español aparecerá en Cambria. Los glifos japoneses, por el contrario, no existen ni en Cambria, ni en Georgia, ni en Times New Roman, ni en Times. Llegamos a nuestra última opción, «serif«, que no es más que una familia genérica para que el navegador elija alguna fuente «con remaches»; alguna, la que sea, que pertenezca a este grupo, se encuentre en el sistema, y, además, tenga glifos japoneses. El resultado final es que tenemos una fuente para cada idioma. Precisamente en este punto me encontraba experimentando el otro día. Funcionaba tal y como esperaba en Internet Explorer, pero no en Chrome ni en Firefox, ya que el japonés aparecía, pero en sans-serif, no en serif, como se puede leer en la regla CSS. Investigando, comprobé que el atributo HTML lang=»ja» era lo que necesitaba para arreglar ambos navegadores. «Lang» es el atributo de lenguaje, y «ja» el código ISO 639-1 para el japonés. Los resultados fueron los siguientes:
Mezclando fuentes para español y japonés