22. font-style

La propiedad font-style se usa principalmente para especificar texto en cursiva. Dicha propiedad puede tener 3 valores:

  • normal: el texto es mostrado normal
  • italic: el texto se muestra en cursiva
  • oblique: El texto está “inclinado” (oblicuo es muy similar a cursiva, pero menos compatible)

Ejm

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-weight

La propiedad font-weight especifica el peso de una fuente:

Ejm

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

font-variant

La propiedad font-variant especifica si un texto debe mostrarse o no en letra minúscula. En una fuente small-caps, todas las letras minúsculas se convierten en letras mayúsculas. Sin embargo, las letras mayúsculas convertidas aparecen en un tamaño de fuente más pequeño que las letras mayúsculas originales en el texto.

Ejm

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

font-size

La propiedad font-size establece el tamaño del texto. Ser capaz de administrar el tamaño del texto es importante en el diseño web. Sin embargo, no debes usar ajustes de tamaño de fuente para hacer que los párrafos parezcan encabezados o que los encabezados parezcan párrafos.

Utiliza siempre las etiquetas HTML adecuadas, como <h1> – <h6> para encabezados y <p> para párrafos.

El valor de font-size puede ser un tamaño absoluto o relativo.

Nota: si no especificas un tamaño de fuente, el tamaño predeterminado para texto normal, como párrafos, es 16px (16px = 1em).

Tamaño de fuente con pixeles

Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto.

Ejm

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Sugerencia: si usas píxeles, aún puedes usar la herramienta de zoom para cambiar el tamaño de toda la página.

Utiliza em

Para permitir a los usuarios cambiar el tamaño del texto (en el menú del navegador), muchos desarrolladores usan em en lugar de píxeles. 1em es igual al tamaño de fuente actual. El tamaño de texto predeterminado en los navegadores es 16px. Entonces, el tamaño predeterminado de 1em es 16px. El tamaño se puede calcular de píxeles a em usando esta fórmula: pixels/16=em

Ejm

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en píxeles. Sin embargo, con el tamaño em, es posible ajustar el tamaño del texto en todos los navegadores.

Desafortunadamente, todavía hay un problema con las versiones anteriores de Internet Explorer. El texto se vuelve más grande de lo que debería cuando se hace más grande y más pequeño de lo que debería cuando se hace más pequeño.

Usar una combinación de porcentaje y em

La solución que funciona en todos los navegadores es establecer un tamaño de fuente predeterminado en porcentaje para el elemento <body>.

Ejm

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

¡Nuestro código ahora funciona muy bien! Muestra el mismo tamaño de texto en todos los navegadores y permite que todos los navegadores hagan zoom o cambien el tamaño del texto.

Tamaño de fuente Responsive

El tamaño del texto se puede configurar con una unidad vw, lo que significa el ancho de la ventana gráfica. De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador.

Ejm

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 
10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. 
If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm.

Scroll al inicio