CSS Fuentes
Las propiedades de fuente CSS definen la fuente, la negrita, el tamaño y el estilo del texto.
Diferencia entre las fuentes serif y sans-serif
En las pantallas de computadora, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.
Fuentes CSS
En CSS, hay dos tipos de nombres de familias de fuentes:
- Familia de fuentes genérica- Combinación de familias de fuentes con apariencia similar (como "Serif" o "Monospace")
- Familia de fuentes específica- Una familia de fuentes específica (como "Times" o "Courier")
| Generic family | Familia de fuentes | Descripción |
|---|---|---|
| Serif | Times New Roman Georgia |
Las fuentes Serif tienen adornos adicionales en los extremos de las líneas de los caracteres. |
| Sans-serif | Arial Verdana |
"Sans" significa "sin" - estas fuentes no tienen adornos adicionales en los extremos. |
| Monospace | Courier New Lucida Console |
Todos los caracteres monoespaciados tienen el mismo ancho. |
Familia de fuentes
La propiedad font-family establece la familia de fuentes del texto.
La propiedad font-family debe establecer varios nombres de fuentes como mecanismo de "respaldo": si el navegador no admite la primera fuente, probará la siguiente.
Nota: Si el nombre de la familia de fuentes tiene más de una palabra, debe ir entre comillas, como Font Family: "SimSun".
Varias familias de fuentes se indican separadas por una coma:
Para combinaciones de fuentes más comunes, consulta nuestrasCombinaciones de fuentes seguras para la Web。
Estilo de fuente
Es principalmente una propiedad de estilo de fuente para especificar texto en cursiva.
Esta propiedad tiene tres valores:
- Normal - muestra el texto normalmente
- Cursiva - muestra el texto en cursiva
- Oblícuo - texto que se inclina hacia un lado (muy similar a la cursiva, pero con menos soporte)
Ejemplo
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Pruébalo »
Tamaño de fuente
La propiedad font-size establece el tamaño del texto.
Poder controlar el tamaño del texto es muy importante en el diseño web. Sin embargo, no debes ajustar el tamaño de la fuente para que un párrafo parezca un título, ni hacer que un título parezca un párrafo.
Asegúrate de usar las etiquetas HTML correctas: <h1> - <h6> para títulos y <p> para párrafos:
Los valores del tamaño de fuente pueden ser absolutos o relativos.
Tamaño absoluto:
- Establece un texto de tamaño específico
- No permite al usuario cambiar el tamaño del texto en todos los navegadores
- El tamaño absoluto es útil cuando se determina el tamaño físico de la salida.
Tamaño relativo:
- Establece el tamaño en relación con los elementos circundantes.
- Permite al usuario cambiar el tamaño del texto en el navegador.
Si no especificas un tamaño de fuente, el tamaño predeterminado es igual al de un párrafo de texto normal: 16 píxeles (16px = 1em).
Establecer el tamaño de fuente en píxeles
Establecer el tamaño del texto con píxeles te da control total sobre el tamaño del texto:
El ejemplo anterior permite ajustar el tamaño del texto en Internet Explorer 9, Firefox, Chrome, Opera y Safari mediante el zoom del navegador.
Aunque se puede ajustar el tamaño del texto con la herramienta de zoom del navegador, este ajuste afecta a toda la página, no solo al texto.
Usar em para establecer el tamaño de fuente
Para evitar el problema de no poder ajustar el texto en Internet Explorer, muchos desarrolladores usan la unidad em en lugar de píxeles.
La unidad de medida em está recomendada por el W3C.
1em es igual al tamaño de fuente actual. El tamaño de texto predeterminado en el navegador es 16px.
Por lo tanto, el tamaño predeterminado de 1em es 16px. Puedes convertir píxeles a em con la siguiente fórmula:px/16=em
Ejemplo
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Pruébalo »
En el ejemplo anterior, el tamaño de texto en em es igual al de los píxeles del ejemplo anterior. Sin embargo, si se usa la unidad em, se puede ajustar el tamaño del texto en todos los navegadores.
Desafortunadamente, el problema sigue estando en el navegador IE. Al ajustar el tamaño del texto, puede resultar más grande o más pequeño de lo normal.
Usar combinación de porcentaje y EM
En la solución para todos los navegadores, se establece el tamaño de fuente predeterminado del elemento <body> con un porcentaje:
Ejemplo
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Pruébalo »
Nuestro código es muy eficaz. En todos los navegadores se muestra el mismo tamaño de texto y permite a todos los navegadores escalar el tamaño del texto.
Más ejemplos
Establecer la negrita de la fuente
Este ejemplo demuestra cómo establecer la negrita de la fuente.
Se puede establecer la transformación de la fuente.
Este ejemplo demuestra cómo establecer la transformación de la fuente.
Todas las propiedades de fuente en una declaración
Este ejemplo demuestra cómo usar la propiedad abreviada para establecer todas las propiedades de fuente en una sola declaración.
Todas las propiedades de fuente CSS
| Property | Descripción |
|---|---|
| font | Establece todas las propiedades de fuente en una sola declaración. |
| font-family | Especifica la familia de fuentes del texto. |
| font-size | Especifica el tamaño de fuente del texto. |
| font-style | Especifica el estilo de fuente del texto. |
| font-variant | Muestra el texto en versalitas o en fuente normal. |
| font-weight | Especifica el grosor de la fuente. |