Esta es una propiedad de CSS poco difundida y lo que nos permite es controlar la forma en que los navegadores y sistemas operativos (Windows y Linux) muestran los textos cuando se utilizan determinado tipo de fuentes, haciendo hincapié en alguna característica.
La propiedad se llama text-rendering y puede tener cuatro valores diferentes:
optimizeSpeed enfatiza la velocidad, deshabilitando ciertas características de las fuentes
optimizeLegibility enfatiza la legibilidad y habilita esas características en desmedro de la velocidad
geometricPrecision en este momento, da el mismo resultado que utilizar optimizeLegibility
auto es el valor por defecto y en la práctica, utiliza optimizeSpeed para fuentes pequeñas (menos de 20 pixeles) y optimizeLegibility para el resto.
La propiedad puede ser utilizada en Firefox, Safari y Chrome y en la mayoría de los casos, el efecto es muy suti pero es más notable cuando se utilizan fuentes específicas como Calibri o Constantia que suelen estar instaladas en Windows.
Al margen de eso, siempre debemos tener en cuenta que eso que vemos nosotros no es necesariamente lo mismo que ven los demás ya que si no se tiene esa fuente instalada, el navegador mostrará la fuente definida como alternativa; por ejemplo:
La propiedad se llama text-rendering y puede tener cuatro valores diferentes:
optimizeSpeed enfatiza la velocidad, deshabilitando ciertas características de las fuentes
optimizeLegibility enfatiza la legibilidad y habilita esas características en desmedro de la velocidad
geometricPrecision en este momento, da el mismo resultado que utilizar optimizeLegibility
auto es el valor por defecto y en la práctica, utiliza optimizeSpeed para fuentes pequeñas (menos de 20 pixeles) y optimizeLegibility para el resto.
La propiedad puede ser utilizada en Firefox, Safari y Chrome y en la mayoría de los casos, el efecto es muy suti pero es más notable cuando se utilizan fuentes específicas como Calibri o Constantia que suelen estar instaladas en Windows.
Al margen de eso, siempre debemos tener en cuenta que eso que vemos nosotros no es necesariamente lo mismo que ven los demás ya que si no se tiene esa fuente instalada, el navegador mostrará la fuente definida como alternativa; por ejemplo:
font-family: Constantia, Arial, sans-serif;
Si no tenemos la fuente Constantia, el texto se mostrará en Arial y si tampoco tenemos esa (cosa bastante improbable) se mostrará con cualquiera de tipo sans-serif.
De allí que se hable de "fuentes seguras" que no son seguras porque no crean problemas sino porque son aquellas que están presentes en la enorme mayoría de los sistemas operativos que usamos:
De allí que se hable de "fuentes seguras" que no son seguras porque no crean problemas sino porque son aquellas que están presentes en la enorme mayoría de los sistemas operativos que usamos:
- font-family: Arial, sans-serif;
- font-family: ‘Comic Sans MS’, cursive;
- font-family: Georgia, serif;
- font-family: Helvetica, sans-serif;
- font-family: Tahoma, sans-serif;
- font-family: ‘Times New Roman’, serif;
- font-family: ‘Trebuchet MS’, sans-serif;
- font-family: ‘Lucida Grande’, sans-serif;
- font-family: Verdana, sans-serif;
La lista la podemos ampliar un poco más pero no mucho:
- font-family: 'Arial Black’, sans-serif;
- font-family: ‘Courier New’, Courier, monospace;
- font-family: Garamond, serif;
- font-family: Geneva, sans-serif;
- font-family: Impact, sans-serif;
- font-family: ‘Lucida Console’, monospace;
- font-family: Palatino, serif;
Si queremos ser más sofisticados pero, a la vez, queremos que la fuente la vean todos, deberemos incrustarla o bien utilizar algunas de las que provee Google Font API.
REFERENCIAS:developer.mozilla.org
8 comentarios:
Puede ser una percepción muy personal, pero ya siento mi blog mas rápido... ¡muchas gracias!, :D :D :D
Yo he estado usando las google Fonts para un proyecto y van de maravilla... igual y en ocasiones podemos notar que tarda en cargar la fuente, pero expande nuestras posibilidades en cuanto a estilos de texto.
¿La "Trebuchet MS" también se encuentra en linux y mac?
Jajajajajaja. Bueno, sea realidad o no, poco importa. De sensaciones también se vive :D
Okey Jorge, las de Google funcionan bien, pero he tratado de hacer inventos y no salen.
JMiur, una duda. He probado Google Font Directory y tengo un problema con la carga de las mismas. Si uso una sola propiedad < link > para cargar todas las fuentes (con sus | entre las distintas fuentes) estas se muestran correctamente en todos los navegadores salvo en iExplorer
Para que iExplorer cargue varias fuentes a la vez es necesario hacer un < link > por cada una de ellas
He revisado la documentación del directorio pero no dice nada al respecto, también he mirado los propios ejemplos de Google y en todos utilizan varias entradas < link >, sin embargo según ellos el método de unir todas las fuentes sobre una misma carga funciona
¿Alguna solución?
Gracias
¿Qué inventos, Gaciela?
No tengo idea, Stranno; desde el punto de vista de la performance, es indiferente cargarlas todas juntas que por separado, de todos modos, se cargarán una por una.
jajaja ahhh utilizar alguna fuente y que quede muy feíto :D
Ah si, eso suele pasar. No todas sirven para todo y algunas son feitas :-D
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...