El tamaño de fuente CSS cambia cuando la familia de fuentes retrocede

Question

Quiero usar una fuente (agalla sans) que se vuelve muy pequeña debido a una altura x corta, etc. etc. Si configuro esto en un tamaño razonable, y luego un navegador se remonta a una fuente más típica que he especificado en la familia de fuentes, la fuente de reverso se vuelve muy grande - ¿puedo establecer el tamaño de fuente de acuerdo con la fuente que está utilizando el navegador?

Answer 1

Recomendaría que intentara especificar las fuentes en cascada que se degradan con gracia cuando las fuentes no están disponibles, p.

Arial, FontThatsLikeArial, FontThatsALittleLikeArial, FontThatsALittleLessLikeArial, Sans-serif; 

Alternativamente, si usted desea tener un control estricto sobre sus fuentes, miren una Cufon, que no requiere que sus usuarios tienen ningún tipo de plug-ins y funciona en la mayoría de los navegadores modernos. http://wiki.github.com/sorccu/cufon/about

Answer 2

Se puede especificar un tamaño de fuente en el selector de cuerpo y así neutralizar el tamaño por defecto del navegador, es decir

body { font-size: 62.5%; } 

62,5% es una buena línea de base, ya que le permite utilizar fácilmente ems para fijar relativamente el tamaño de letra de los elementos en el cuerpo.

En 62.5%, 1em = 10px, 1.2em = 12px y así sucesivamente.

Simplemente configure un tamaño de letra en el cuerpo como elementos de referencia y estilo en consecuencia.

Answer 3

¿Puedo establecer el tamaño de fuente de acuerdo con la fuente que está usando el navegador?

Lamentablemente, no, no en CSS.

Answer 4

Le recomendaría que use las fuentes típicas que se encuentran en la mayoría (o todas) de las máquinas que acceden al sitio web que está construyendo. La vista de un sitio web no debería diferir debido al navegador (los problemas relacionados con IE son otro tema ...). Utilice fuentes comunes o alternativas que funcionen de manera similar ...

Answer 5

Hubo un interesante artículo escrito hace unas semanas que trata este tema.

Puede leer el artículo aquí: http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

En resumen, el artículo es la utilización de algunos métodos ... @ font-face para los navegadores modernizados, una fuente de la escritura de detección de jQuery, y Cufón para el reemplazo de la fuente si antes métodos fallan

Esta no es una solución perfecta. Y como muchos de los que mencioné anteriormente, su mejor opción es usar una fuente que se degrade graciosamente.

intenta configurar el tipo de letra-pilas a algo así como 'GillSans, Calibri, Trebuchet, sans-serif' - para copiar un párrafo o un 'GillSans, Trebuchet, Calibri, sans-serif' - para títulos y encabezados

Answer 6

Tuve el mismo problema al usar Calibri (un poco más pequeño en comparación con la mayoría de las fuentes sans).Terminé haciendo lo siguiente (se supone que tiene jQuery):

1. Get script de detección de fuente de Remy de Sharp http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. Añadir lo siguiente a la función $(document).ready():

   $(document).ready(function() { 
       font.setup(); 
       if(!font.isInstalled('Calibri')) 
        $('body').css('font-size','87.5%'); 
   }); 
   

Entonces, si el usuario no tiene Calibri vemos Arial en 87.5%. Esto solo se aplica a los elementos donde el tamaño de fuente no se definió/heredaba. Dondequiera tamaño de fuente se define explícitamente tendrá que ajustarse también (tal vez añadir una clase a aquellos elementos y cambiar el selector de jQuery para $('.adjustClass'))

Sería bueno si pudiera hacer:. font:11px Calibri, 10px Arial; - pero no hubo suerte :)