Tamaño de fuente CSS:relativo vs.valores absolutos.¿Cuál usar?[cerrado]

StackOverflow https://stackoverflow.com/questions/520939

  •  21-08-2019
  •  | 
  •  

Pregunta

  • ¿Cuál es la mejor manera de cambiar el tamaño del texto en todos los navegadores?
  • ¿Cuáles son las ventajas y desventajas de definir el tamaño de fuente en píxeles/em?
¿Fue útil?

Solución

¿Cuál usar?

Ambos.Relativo para el texto del cuerpo principal que los usuarios tendrán que leer mucho (por lo que querrán poder leerlo cómodamente);Absoluto para el texto cuyo tamaño debe ajustarse para que coincida con otros elementos de la página que tienen un tamaño en píxeles, como las imágenes.

En términos relativos, "%" y "em" son igualmente buenos.

Para absoluto, utilice siempre "px".Nunca use 'pt' para uso en pantalla, solo es sensato para hojas de estilo impresas.Es una lástima que 'pt' se considere la unidad predeterminada para el manejo de fuentes porque en la web es la peor opción posible.

(ETA:Tenga en cuenta que desde esta respuesta, CSS3 tiene redefinido las “unidades físicas” para que px y pt son siempre proporcionales.Por lo tanto, este problema ya no importa a menos que le preocupen los navegadores muy antiguos).

A algunas personas no les gusta el efecto "compuesto" de los tamaños de fuente relativos.En realidad, el truco consiste en utilizar la menor cantidad posible de cambios de tamaño de fuente para evitar demasiados anidamientos.Él debería Será posible obtener el comportamiento de tamaño relativo al preferido del usuario sin el comportamiento compuesto utilizando las palabras clave de tamaño de fuente 'pequeño'/'mediano'/'xx-grande'/etc., pero desafortunadamente de esa manera no es posible. No obtienen mucha granularidad y todavía hoy existen diferencias entre cómo los manejan los navegadores.

Otros consejos

Me quedo con el tamaño de la fuente por defecto elegido por el usuario, a continuación, utilizar el tamaño relativo: 

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

Este método respeta la elección del usuario del tamaño de la fuente en su navegador, que normalmente se establece en 16 píxeles.

Personalmente establecí un tamaño de fuente absoluto en el body y desde allí configurar todo como relativo a eso.p.ej: 

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

Intente evitar combinar tamaños relativos compuestos:

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

Hoy en día, todos los navegadores modernos tienen zoom de página completa, lo que significa que incluso el tamaño de la fuente en píxeles está bien.

El beneficio de este método es que puede aumentar o reducir fácilmente el tamaño de todo el texto cambiando una definición.

La desventaja es que si desea cambiar el tamaño de fuente predeterminado, pero no los encabezados (por ejemplo), habrá muchas declaraciones que cambiar.

A Lista hizo Aparte extensa escribir sobre cómo funcionan los tamaños de fuente en varios navegadores. Resulta ser más complicado de lo que cabría esperar, como todo lo demás en el CSS. El consenso parece inclinarse hacia el uso de EMS, ya que le da al usuario más control sobre el ajuste del tamaño de la fuente en el navegador.

Yo prefiero valores relativos desde el Internet Explorer (<7?) No pueden escalar los valores absolutos o píxeles.

Una cosa que he visto es utilizar a las personas para definir un tamaño base en el CSS del cuerpo (por ejemplo, 12 puntos) y luego todos los demás tamaños de fuente son porcentajes de dicho (por ejemplo, 140% para los títulos, el 80% para las pequeñas, etc).

Si utiliza pt entonces tendrá diferencias en pantalla basada en conjunto de los usuarios DPI, pero va a estar bajo el control del usuario, tal vez.

Si utiliza px entonces tendrá problemas en dispositivos muy altas dpi.

Em y pt son buenos para CSS para la impresión.

Hay una gran cantidad de hacerlo y ver lo que sucede sobre las fuentes y CSS.

Si utiliza tamaños absolutos entonces cualquier lectores con discapacidad visual que le resulte difícil de leer. Si utiliza tamaños relativos a continuación, que no son más que especifica qué texto es mayor / menor que otro texto en su página, todo en relación con el tamaño del texto por defecto del usuario que podrían ser grandes (si deteriorada) o pequeña (aunque un poco raro).

Una desventaja de texto de tamaño relativo es cuando usted quiere que su sitio web para ser fijado tamaños, pero si es posible que en realidad debería ir con un diseño más fluido de todos modos para que la página cambia de tamaño para acomodar su contenido.

píxeles son de un tamaño fijo. Esto significa que cuando se ve en una pantalla de resolución y el texto siempre tener el mismo tamaño.

Em son escalables lo que significa que la gente en diferentes tamaños y resoluciones de pantalla en general, puede obtener una mejor experiencia.

Algunos navegadores tienen problemas que alteran el tamaño de los tipos de letra de tamaño fijo (px y PT) y por lo tanto tienden a no ser muy bueno para la fuente del Web ya que algunos usuarios pueden necesitar para aumentar el tamaño de la fuente utilizando un ampliador de pantalla o simplemente la rueda del ratón.

tamaños de fuente relativos tienen la costumbre de irritar a los diseñadores ignorantes que irritó a conseguir que el sitio web no se corresponde exactamente a sus diseños.

En mi mente, aplacar a los diseñadores que deberían estar mejor no es una razón suficiente para usar siempre fuentes fijas en el desarrollo web.

Con la escala EM es más versátil con las fuentes. También es más accesible.

Si usted no ha trabajado con esto antes, una herramienta como Calculadora Em puede ser muy útil para la comprensión de cómo funciona la etiqueta / modelo.

El uso de tamaños relativos hará que su página se vea mejor en dispositivos móviles como el iPhone, especialmente ya que hacen que la página en una ventana más grande que reduce la escala para que quepa en el espacio necesario.

Si se puede soltar para IE8 continuación, se sugiere emplear rem unidades. Son unidades relativas, como em pero no en cascada a los elementos de niños haciéndolos mucho más sencillo trabajar con

em son complejos 

p {
  font-size: 2.5em;
  span {
    font-size: 1.5 em;
    /* font size comes out to 3.75 root em*/
  }
}

<=> son más simples 

p {
  font-size: 2.5rem;
  span {
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/
  }
}

La mayor parte de mi fondo de programación es aplicaciones de escritorio, pero he estado leyendo una cantidad justa para el desarrollo web recientemente, y los libros que he encontrado sugieren el uso de una especificación de tamaño de la fuente de palabras clave (pequeño, mediano, etc.) y luego escalar que arriba o hacia abajo por porcentaje o em.

Si no se especifica el tamaño de fuente en píxeles, los usuarios de versiones antiguas de IE no serán capaces de anular el tamaño del texto, es decir, no serán capaces de hacerlo más grande o más pequeña para adaptarse a sus preferencias.

Sin embargo, IE5 también plantea un problema cuando el tamaño de fuente se especifica por palabra clave:. En relación con otros navegadores, IE5 muestra el texto sobre un paso grande

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top