Fuentes CSS

Tabla de contenido

    Mostrar tabla de contenidos

¡Es importante elegir la fuente adecuada para su sitio web!

La selección de fuentes es importante

Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan una sitio web.

La fuente adecuada puede crear una identidad sólida para su marca.

Es importante utilizar una fuente que sea fácil de leer. La fuente agrega valor a su texto. También es importante elegir el color y el tamaño del texto correctos. para la fuente.

Familias de fuentes genéricas

En CSS hay cinco familias de fuentes genéricas:

  1. Las fuentes Serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.

  2. Las fuentes Sans-serif tienen líneas limpias (sin pequeños trazos). Crean un aspecto moderno y minimalista.

  3. Fuentes monoespaciadas: aquí todas las letras tienen el mismo ancho fijo. Crean una apariencia mecánica.

  4. Las fuentes cursivas imitan la escritura humana.

  5. Las fuentes Fantasy son fuentes decorativas y divertidas.

Todos los diferentes nombres de fuentes pertenecen a una de las familias de fuentes genéricas.

Diferencia entre fuentes Serif y Sans-serif

Nota: En las pantallas de ordenador, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.

Algunos ejemplos de fuentes

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

La propiedad de familia de fuentes CSS

En CSS, usamos la propiedad font-family para especificar la fuente de un texto.

Nota: Si el nombre de la fuente tiene más de una palabra, debe estar entre comillas, como: "Times New Roman".

Consejo: La propiedad font-family debe contener varios nombres de fuentes como sistema "alternativo". para garantizar la máxima compatibilidad entre navegadores/sistemas operativos. Comience con la fuente que desee y termine con una familia genérica. (dejar que el El navegador elige una fuente similar en la familia genérica, si no hay otras fuentes. disponible). Los nombres de las fuentes deben estar separados por comas. Leer más sobre fuentes alternativas en el próximo capítulo.

Ejemplo

Especifique algunas fuentes diferentes para tres párrafos:

 .p1 {
  font-family: "Times New Roman", Times, serif;
}

  .p2 {
  font-family: Arial, Helvetica, sans-serif;
}

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>