Fuente CSS

La propiedad de fuente CSS define la serie de fuentes, el tamaño, el negrismo, el estilo (como cursiva) y la transformación (como minúsculas mayúsculas) del texto.

Serie de fuentes CSS

En CSS, hay dos tipos diferentes de nombres de series de fuentes:

  • Series de fuentes genéricas - combinaciones de sistemas de fuentes con apariencia similar (por ejemplo, "Serif" o "Monospace")
  • Series de fuentes específicas - series de fuentes específicas (por ejemplo, "Times" o "Courier")

Además de varias series de fuentes específicas, CSS define 5 series de fuentes genéricas:

  • Fuentes serif
  • Fuentes sans-serif
  • Fuentes monoespaciadas
  • Fuentes cursivas
  • Fuentes de fantasía

Si necesita obtener más información sobre las series de fuentes, lea Serie de fuentes CSS.

Especificar la serie de fuentes

Usar Propiedad font-family Definir la serie de fuentes del texto.

Usar series de fuentes genéricas

Si desea que el documento utilice un tipo de letra sans-serif, pero no le importa qué tipo de letra, aquí hay una declaración adecuada:

body {font-family: sans-serif;}

Prueba personalmente

El agente de usuario seleccionará una fuente de la serie sans-serif (por ejemplo, Helvetica) y aplicará a los elementos que contiene el elemento body. Debido a la herencia, esta elección de fuente también se aplicará a todos los elementos que contiene el elemento body, a menos que haya un selector más específico que lo cubra.

Especificar la serie de fuentes

Además de usar series de fuentes genéricas, también puede configurar un tipo de letra más específico a través de la propiedad font-family.

El siguiente ejemplo establece la fuente Georgia para todos los elementos h1:

h1 {font-family: Georgia;}

Prueba personalmente

Esta regla también puede generar otro problema, si el agente de usuario no tiene instalada la fuente Georgia, solo puede usar la fuente predeterminada del agente de usuario para mostrar el elemento h1.

Podemos resolver este problema combinando un nombre de tipo de letra específico y una serie de fuentes genéricas:

h1 {font-family: Georgia,} serif;}

Prueba personalmente

Si el lector no ha instalado Georgia, pero ha instalado la fuente Times (un tipo de letra de la serie serif), el agente de usuario podría usar Times para el elemento h1. Aunque Times no coincide completamente con Georgia, al menos es suficientemente cercano.

Por lo tanto, recomendamos proporcionar una serie de fuentes genéricas en todas las reglas de font-family. Esto proporciona una salida de emergencia, de modo que cuando el agente de usuario no pueda proporcionar una fuente específica que coincida con la regla, puede elegir una fuente candidata.

Si está muy familiarizado con los tipos de letra, también puede especificar una serie de tipos de letra similares para los elementos dados. Para hacer esto, es necesario ordenar estos tipos de letra por prioridad y luego conectarlos con comas:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Prueba personalmente

Basándose en esta lista, el agente de usuario buscará estos tipos de fuente en el orden especificado. Si todos los tipos de fuente enumerados no están disponibles, simplemente se seleccionará un tipo de fuente serif disponible.

Uso de comillas

Quizás ya haya notado que en los ejemplos anteriores se utilizan comillas simples. Sólo se deben usar comillas en la declaración font-family si el nombre de la fuente contiene un o más espacios (por ejemplo, New York), o si el nombre de la fuente incluye símbolos como # o $.

Se pueden aceptar comillas simples o dobles. Sin embargo, si se coloca un atributo font-family dentro del atributo style de HTML, se debe usar el tipo de comillas que no se utiliza en la propiedad en sí:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,"
 'New York', serif;">...

Prueba personalmente

Estilo de fuente

Atributo font-styleSe utiliza con más frecuencia para definir texto cursivo.

Esta propiedad tiene tres valores:

  • normal - Visualización de texto normal
  • italic - Visualización de texto cursiva
  • oblique - Visualización de texto inclinado

Ejemplo

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Prueba personalmente

Diferencias entre italic y oblique

El atributo font-style es muy simple: se utiliza para elegir entre texto normal, italic y oblique. Lo único un poco complicado es definir la diferencia entre texto italic y oblique.

El estilo italic es un estilo de fuente simple, que realiza algunos cambios en la estructura de cada letra para reflejar el aspecto cambiado. A diferencia de esto, el texto oblique es una versión inclinada del texto vertical normal.

En circunstancias normales, el texto italic y oblique se ven completamente iguales en los navegadores web.

Deformación de fuente

Atributo font-variantSe puede establecer el estilo de letras en mayúsculas pequeñas.

Las letras en mayúsculas pequeñas no son letras mayúsculas normales ni minúsculas, estas letras utilizan mayúsculas de diferentes tamaños.

Ejemplo

p {font-variant:small-caps;}

Prueba personalmente

Negrita de la fuente

Atributo font-weightConfigurar el grosor del texto.

Utilizar la palabra clave bold para establecer el texto en negrita.

Las palabras clave de 100 a 900 especifican 9 grados de negrura para la fuente. Si un cuerpo de texto tiene estos niveles de negrura integrados, estos números se mapean directamente a los niveles predefinidos, 100 para la forma más delgada de la fuente, y 900 para la más gruesa. El número 400 es equivalente a normal, y 700 a bold.

Si se establece el elemento en bolder, el navegador establecerá un tipo de fuente más grueso que el valor heredado. Por el contrario, la palabra clave lighter causará que el navegador descienda en el grado de negrura en lugar de subir.

Ejemplo

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Prueba personalmente

Tamaño de la fuente

Atributo font-sizeConfigurar el tamaño del texto.

Tener la capacidad de gestionar el tamaño del texto es importante en el campo del diseño web. Sin embargo, no debe ajustar el tamaño del texto para que los párrafos se vean como títulos, o para que los títulos se vean como párrafos.

Siempre utilice los títulos HTML correctos, como usar <h1> - <h6> para marcar los títulos, y usar <p> para marcar los párrafos.

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

Valor absoluto:

  • Establecer el tamaño del texto en un tamaño especificado
  • No permitir que los usuarios cambien el tamaño del texto en todos los navegadores (no es beneficioso para la accesibilidad)
  • El tamaño absoluto es útil cuando se determina el tamaño físico de salida

Tamaño relativo:

  • Configurar el tamaño en relación con los elementos circundantes
  • Permitir que los usuarios cambien el tamaño del texto en el navegador

Nota:Si no se especifica el tamaño de la fuente, el tamaño predeterminado del texto normal (por ejemplo, párrafos) es de 16 píxeles (16px = 1em).

Configurar el tamaño de la fuente utilizando píxeles

Al configurar el tamaño del texto en píxeles, se puede controlar completamente el tamaño del texto:

Ejemplo

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Prueba personalmente

En Firefox, Chrome y Safari, se puede ajustar el tamaño del texto de los ejemplos anteriores, pero no en Internet Explorer.

Aunque se puede ajustar el tamaño del texto utilizando la herramienta de escala del navegador, en realidad se ajusta a toda la página, no solo al texto.

Configurar el tamaño de la fuente utilizando em

Para evitar problemas de ajuste de texto en Internet Explorer, muchos desarrolladores utilizan la unidad em en lugar de píxeles.

W3C recomienda usar la unidad de tamaño em.

1em es igual al tamaño actual de la fuente. Si el tamaño de la fuente de un elemento es de 16 píxeles, entonces para ese elemento, 1em es igual a 16 píxeles. Al establecer el tamaño de la fuente, el valor de em cambia en relación con el tamaño de la fuente del elemento padre.

El tamaño predeterminado del texto en los navegadores es de 16 píxeles. Por lo tanto, el tamaño predeterminado de 1em es de 16 píxeles.

Se puede usar la siguiente fórmula para convertir píxeles en em:píxeles/16=em

(Nota: 16 es el tamaño predeterminado de la fuente del elemento padre, suponiendo que el tamaño de la fuente del elemento padre sea 20px, entonces la fórmula debe cambiarse a:píxeles/20=em

Ejemplo

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Prueba personalmente

En el ejemplo anterior, el tamaño del texto en em es el mismo que el tamaño del texto en píxeles en el ejemplo anterior. Sin embargo, si se utiliza el unidad em, se puede ajustar el tamaño del texto en todos los navegadores.

Desafortunadamente, aún hay problemas en IE. Al resetear el tamaño del texto, puede ser más grande o más pequeño que el tamaño normal.

Uso combinado de porcentaje y EM

Una solución efectiva en todos los navegadores es establecer el valor predeterminado de font-size en porcentaje para el elemento body (elemento padre):

Ejemplo

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Prueba personalmente

Nuestro código es muy efectivo. En todos los navegadores, se puede mostrar el mismo tamaño de texto y permitir que todos los navegadores escalen el tamaño del texto.

Ejemplo de atributo de fuente CSS:

Establecer la fuente del texto
Este ejemplo muestra cómo establecer la fuente del texto.
Establecer el tamaño de la fuente
Este ejemplo muestra cómo establecer el tamaño de la fuente.
Establecer el estilo de la fuente
Este ejemplo muestra cómo establecer el estilo de la fuente.
Establecer el estilo alternativo de la fuente
Este ejemplo muestra cómo establecer el estilo alternativo de la fuente.
Establecer el grosor de la fuente
Este ejemplo muestra cómo establecer el grosor de la fuente.
Todas las propiedades de fuente en una declaración
Este ejemplo muestra cómo usar atributos abreviados para establecer propiedades de fuente en una declaración.

Atributos de fuente CSS

Atributo Descripción
font Atributos abreviados. Sirve para establecer todas las propiedades de fuente en una declaración.
font-family Configurar la serie de fuentes.
font-size Configurar el tamaño de la fuente.
font-size-adjust Escalar inteligentemente la fuente de reemplazo cuando la fuente preferida no está disponible. (El atributo se eliminó en CSS2.1.)
font-stretch Estirar horizontalmente la fuente. (El atributo se eliminó en CSS2.1.)
font-style Configurar el estilo de la fuente.
font-variant Mostrar texto en mayúsculas pequeñas o en fuente normal.
font-weight Configurar el grosor de la fuente.