2

En CSS se pueden utilizar diferentes unidades para indicar el tamaño de una fuente, una de ellas es vw que es una unidad relativa al ancho de la ventana (viewport). Según la página de MDN:

Longitudes Viewport-porcentaje

vh

1/100 de la altura de la vista (viewport).

vw

1/100 del ancho de la vista (viewport).

Teniendo eso en cuenta, pensé en poner una cadena de 100 caracteres (123456789_ repetido 10 veces) con tamaño 1vw y, al menos en teoría, debería ocupar un 100% de la vista... pero no es el caso y la cadena se queda como a mitad de la ventana:

* {
  margin:0;
  padding:0;
  border:0;
  font-size:1vw;
}
<div>123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_</div>

Ahora, si en lugar de poner 1vw, indico que la fuente debe ser 2vw, el texto sí ocupa el ancho completo de la ventana (hay que pulsar en el botón de Página Completa para ver el efecto, parece que el iframe no le gusta):

* {
  margin:0;
  padding:0;
  border:0;
  font-size:2vw;
}
<div>123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_</div>

Si mi cadena tiene 100 caracteres y le pongo un ancho de letra de 1% del ancho de la ventana (1vw) la cadena debería ocupar el 100% de la ventana, pero en lugar de eso, ocupa un 50% y debo poner un tamaño de 2vw (que entonces ocuparía 200%) para que se vea bien. ¿Por qué ocurre esto?

He comprobado que este comportamiento es consistente entre navegadores (ocurre lo mismo en Chrome, Firefox e IE) y en diferentes herramientas (JSFiddle, CodePen), así que debe ser algo que yo no estoy haciendo bien o que estoy pasando por alto.

También he notado que vw sólo funciona si la cadena mantiene la fuente por defecto del navegador (Times New Roman) y si esa fuente se cambia a otra (por ejemplo Arial, Verdana o Courier), entonces también falla (tanto con 1vw como 2vw).

3
  • Has probado con un tipo de letra de tamaño fijo como Courier New?
    – jasilva
    el 1 mar. 2016 a las 16:17
  • Sí, probé con Courier y Courier New. Sólo con la fuente por defecto del navegador se ve bien y sólo si es 2vw.
    – Alvaro Montoro
    el 1 mar. 2016 a las 16:33
  • su pregunta es interesante, yo apenas conozco algo de css ahora mismo, pero he estado jugando con su ejemplo, no se como explicarle esto, hay un tipo no recuerdo cual era si -> em o otro que creo que se calcula en base a U0030, pero como no estaba seguro si aplicaba a 0 o '0' y hice este ejemplo que es curioso, pues al usar solo esos caracteres ocupa el 100% (bueno mas o menos por como funciona fiddle) jsfiddle.net/z6h3nz14 Saludos el 1 mar. 2016 a las 18:01

1 respuesta 1

4

El font-size define la altura de los caracteres, no el ancho, los caracteres no son cuadrados, por lo que un carácter de font-size: 1vw; tiene un ancho de 0.5vw (aunque eso vale sólo con la tipografía del navegador ya que las diferentes tipografías tienen diferentes proporciones).

This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. font-size (MDN)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.