Fuentes en CSS

Aquí aprenderemos a utilizar las fuentes en CSS.

Puedes revisar mis otros artículos ¿Qué es CSS?, ¿Cómo utilizar los colores en CSS? y Fondos en CSS en mis artículos anteriores.

Fuentes

Las propiedades de fuente en CSS definen la familia de fuentes, la negrita, el tamaño y el estilo de un texto.

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

Font-family

En CSS, hay dos tipos de nombres de familia de fuentes:

Familia genérica: un grupo de familias de fuentes con un aspecto similar (como “Serif” o “Monospace”)
Familia de fuentes: una familia de fuentes específica (como “Times New Roman” o “Arial”)

Familia genérica Familia de fuentes Descripción
Serif Times New Roman
Georgia
Garamond
Las fuentes Serif tienen líneas pequeñas en los extremos en algunos caracteres
Sans-serif Arial
Verdana
Trebuchet
“Sans” significa sin – estas fuentes no tienen las líneas al final de los caracteres
Monospace Courier
Courier New
Lucida Console
Todos los caracteres monoespaciales tienen el mismo ancho

Lo declaramos así:

La propiedad de la familia de fuentes debe contener varios nombres de fuentes como un sistema de “respaldo”. Si el navegador no es compatible con la primera fuente, intenta con la siguiente fuente, y así sucesivamente.

Comience con la fuente que desee y termine con una familia genérica, para que el navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles.

Nota: si el nombre de una familia de fuentes es más de una palabra, debe estar entre comillas, como: “Times New Roman”.

Se especifica más de una familia de fuentes en una lista separada por comas.

Font-style
La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique.
El valor oblique es similar a italic pero menos soportado por los navegadores

Italic Normal Oblique

Font-variant
La propiedad font-variant especifica si un texto debe mostrarse o no en una fuente de mayúsculas pequeñas.

En una letra de mayúsculas pequeñas, todas las letras minúsculas se convierten en letras mayúsculas. Sin embargo, las letras mayúsculas convertidas aparecen en un tamaño de letra más pequeño que las letras mayúsculas originales en el texto.

Juan Rafael Ruiz

Juan Rafael Ruiz

Font-weight

La propiedad de tamaño de fuente 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 debe usar ajustes de tamaño de fuente para que los párrafos se vean como encabezados, o los encabezados se vean como párrafos.

Usa siempre las etiquetas HTML adecuadas, como <h1> – <h6> para los títulos y <p> para los párrafos.

El valor del tamaño de fuente puede ser un tamaño absoluto o relativo.

Tamaño absoluto:

Establece el texto a un tamaño especificado
No permite que un usuario cambie el tamaño del texto en todos los navegadores (malo por razones de accesibilidad)
El tamaño absoluto es útil cuando se conoce el tamaño físico de la salida

Tamaño relativo:

Establece el tamaño relativo a los elementos circundantes
Permite a un usuario cambiar el tamaño del texto en los navegadores

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

Texto de ejemplo
Texto de ejemplo
Texto de ejemplo
Texto de ejemplo

Font-weight

El siguiente ejemplo muestra cómo establecer el font-weight de un elemento. Los valores posibles podrían ser normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Texto de ejemplo
Texto de ejemplo
Texto de ejemplo
Texto de ejemplo
Texto de ejemplo
Texto de ejemplo
Texto de ejemplo

Font

También podemos escribir todo el código en una sola línea. siendo importante seguir el orden:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

Las fuentes son una ayuda indispensable a la hora del diseño web.

¿Cuales son tus fuentes preferidas? Dímelo aquí abajo.

Deja un comentario