¿Puedo establecer el tamaño de fuente en relación con el tamaño de la página?

3 minutos de lectura

avatar de usuario de pistacho
pistacho

¿Hay alguna manera de hacer font-size en relación con el tamaño de la página? Aplicar el porcentaje como unidad se refiere al tamaño de fuente estándar (como el 90 % de 12 px, ¡no el 90 % de la página!). Esto es diferente del comportamiento de la mayoría de las otras etiquetas.

¿Alguna forma de hacer que la página ‘escale hacia arriba y hacia abajo’ también con fuentes? ¿Debo confiar en em?

Gracias

avatar de usuario de zachleat
Zachleat

Vea las nuevas unidades vh y vw CSS. El soporte del navegador aún no es muy bueno.

http://snook.ca/archives/html_and_css/vm-vh-unidades

Aterrizó en WebKit recientemente:
https://bugs.webkit.org/show_bug.cgi?id=27160

En los navegadores que lo soportan, 1 vh es el 1% (1/100) de la altura de la ventana gráfica, y 1 vw es el 1% (1/100) del ancho de la ventana gráfica. también hay vmin y vmax unidades, que representan el menor de los dos y el mayor de los dos, respectivamente.

  • Debe aclarar que esto aún no es ampliamente compatible y que vino en CSS3. Y quizás más sobre lo que es el vh y el vm en lugar de un enlace desnudo a un blog.

    – aleatorio

    29 de marzo de 2012 a las 16:11

  • “El soporte del navegador aún no es excelente”. Además, esto es Internet, ¿no? ¿Por qué debería repetir lo que ya se ha escrito? Deberíamos recompensar las buenas fuentes de información con tráfico, no tratar de aislarlo.

    – zachleat

    1 de abril de 2012 a las 22:08

  • Esa es una buena propuesta si el linkrot nunca existiera. meta.stackexchange.com/questions/8231/…

    – aleatorio

    1 de abril de 2012 a las 22:11


  • Interesante lectura, gracias por compartirla. Si desea editar mi respuesta (¿eso es algo aquí?), Siéntase libre de hacerlo, también conocido como “solicitudes de extracción bienvenidas”.

    – zachleat

    4 abr 2012 a las 21:05

  • genial, aquí hay un ejemplo de cómo hacerlo: esto es una prueba

    –Thorsten Staerk

    5 de febrero de 2015 a las 7:08

No, no puede establecer el tamaño de la fuente en un porcentaje relativo al tamaño de la página.

Talla en em se basa en el tamaño relativo a cómo se representaría normalmente la fuente en 16 puntos.

Si desea que su página se amplíe y reduzca y mantenga algún tipo de escala, los cuadros y la fuente, entonces colóquela en em estaría bien.

Ese método permitirá que la escala de las fuentes y los cuadros de la página crezcan a un tamaño relativo entre sí y, con suerte, no se salgan de los límites y bordes.

  • Vale la pena señalar que es relativo al tamaño de fuente predeterminado del navegador, que puede o no ser de 16 puntos (aunque este es el valor predeterminado en los navegadores de escritorio).

    – Tate Johnson

    25 de julio de 2009 a las 9:47

  • Eso es cierto, 16 puntos para el tamaño predeterminado en los navegadores. Y realmente no puede adivinar si el usuario lo tiene configurado más grande o más pequeño, lo que podría ser un poco molesto si el CSS depende de eso.

    – aleatorio

    25 de julio de 2009 a las 9:53

  • así que dije foo y esperaba que el tamaño de “foo” se escalara con la ventana del navegador. Eso no sucedió.

    –Thorsten Staerk

    5 de febrero de 2015 a las 6:58

  • Tuve que adaptar una aplicación para pantallas extra grandes, acabas de salvarme la vida

    – Moulaye Abderrahmane

    23 de septiembre de 2017 a las 4:13

Avatar de usuario de Ryan McGeary
ryan macgeary

Pruebe un complemento de jQuery como Ajustar texto. Ajusta automáticamente el tamaño del texto para que se ajuste al ancho del elemento principal.

Otro complemento de jQuery con el mismo objetivo es Texto grande (manifestación).

Aquí hay un pequeño script que hice exactamente para eso (úselo como respaldo cuando vw no sea compatible)
https://gist.github.com/2475269

Otra respuesta no ideal es usar una serie de puntos de interrupción CSS como este:

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/

Avatar de usuario de Ninjakannon
Ninjakannon

Desde mi punto de vista, el rango de densidades aparentes de píxeles que ve el espectador de una página web ahora es enorme, desde un HTC One sostenido a 12 pulgadas de la cara, donde hay 5600 píxeles/radianes, hasta quizás una pantalla de plasma de 50 pulgadas que funciona a 480p. , que es de aproximadamente 950 píxeles/radianes a 4 pies.

O dicho de otra manera, una fuente de 20 px es casi 6 veces más grande en su campo de visión en esa pantalla de plasma que el último teléfono.

La solución que preparé fue establecer el tamaño de la fuente del cuerpo en píxeles absolutos como un múltiplo del window.screenWidth pero limítelo a un número mínimo y máximo de unidades, luego use em’s para todos los tamaños de fuente después de eso. El em’s+uso adecuado de los encabezados debería significar que la accesibilidad está bien.

Agrego esta función a la página (o es JS) para establecer el tamaño:

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

Para que esto funcione, se agrega lo siguiente a la etiqueta del cuerpo:

<body onresize="setFontSize()" onload="setFontSize()">

Luego, solo usa su CSS (o formato en línea), todo basado en unidades % o em y las cosas deberían escalar bien dentro de esos límites.

O, en JQuery, puedes hacer:

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Avatar de usuario de NawaMan
NawaMan

Al menos para Firefox, 1em se puede utilizar para establecer el tamaño de fuente relacionado con el tamaño de fuente del padre. Entonces, si establece el tamaño de fuente del cuerpo en un valor que está en proporción con el tamaño de la página. Todas las fuentes debajo del cuerpo que usan ’em’ como unidad estarán en relación con la página.

Para ello, debe establecer el tamaño del cuerpo en relación con la página como height: 100% o ancho si desea relacionar el tamaño con el ancho.

Luego, tendrás que sincronizar constantemente la altura del cuerpo con el tamaño de la fuente. Esto se puede hacer con ‘onResize’.

Ver más detalle a continuación Enlace.

  • el enlace ya no existe el 31 de julio de 2012

    – k3b

    31 de julio de 2012 a las 5:13

¿Ha sido útil esta solución?