Las propiedades de la fuente CSS definen la familia de fuentes, la audacia, el tamaño y el estilo de un texto.
Diferencia entre Fuentes Serif y Sans-serif
Las familias de fuentes CSS
En CSS, hay dos tipos de nombres de familias de fuentes:
- genérica de la familia - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Fuente de ancho fijo")
- Familia tipográfica - una familia de fuentes específicas (como "Times New Roman" o "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Nota: En las pantallas de ordenador, fuentes sans serif que se consideran más fácil de leer que las fuentes serif. |
|---|
Familia tipográfica
La familia de fuentes de un texto se establece con el font-family propiedad.
La font-family propiedad debe contener varios nombres de fuentes como un sistema de "retorno". Si el navegador no es compatible con la primera fuente, se intenta con el siguiente tipo de letra, y así sucesivamente.
Comenzar con la fuente que desea, y terminar con una familia genérica, para permitir que el navegador recoger una fuente similar en la familia genérica, si no hay otras fuentes están disponibles.
Nota: Si el nombre de una familia de fuentes es más de una palabra, debe ser entre comillas, como: "Times New Roman".
Más de una familia de fuentes se especifica en una lista separada por comas:
Para combinaciones de fuentes de uso común, visita nuestra web seguras Fuentes combinaciones .
Estilo de fuente
El font-style propiedad se ha utilizado para especificar el texto en cursiva.
Esta propiedad tiene tres valores:
- normales - El texto se muestra normalmente
- cursiva - El texto se muestra en cursiva
- oblicua - El texto está "inclinado" (oblicua es muy similar a cursiva, pero menos compatible)
Ejemplo
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Inténtalo tú mismo " Tamaño de fuente
El font-size propiedad establece el tamaño del texto.
Ser capaz de gestionar el tamaño del texto es importante en el diseño web. Sin embargo, no se debe utilizar ajustes de tamaño de fuente para que los puntos se parecen a las partidas, o en las partidas parecen párrafos.
Utilice siempre las etiquetas HTML apropiados, como <h1> - <h6> para los títulos y <p> para los párrafos.
El valor de 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 a un usuario cambiar el tamaño del texto en todos los navegadores (mal por razones de accesibilidad)
- Tamaño absoluto es útil cuando se conoce el tamaño físico de la salida
Tamano relativo:
- Establece el tamaño en relación con los elementos que rodean
- Permite a un usuario cambiar el tamaño del texto en los navegadores
| Nota: Si no se especifica un tamaño de fuente, el tamaño predeterminado para el texto normal, como párrafos, es 16px (16px = 1 em). |
|---|
Establecer tamaño de fuente Con píxeles
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto:
Consejo: Si utiliza píxeles, puede seguir utilizando la herramienta de zoom para cambiar el tamaño de la página entera.
Establecimiento del tamaño de fuente con Em
Para permitir a los usuarios cambiar el tamaño del texto (en el menú de navegación), muchos desarrolladores utilizan em en lugar de píxeles.
El tamaño de la unidad em es recomendado por el W3C.
1 em es igual al tamaño de la fuente actual. El tamaño de texto por defecto en los navegadores es 16px. Por lo tanto, el tamaño predeterminado de 1 em es 16px.
El tamaño se puede calcular a partir de píxeles a em utilizando esta fórmula:píxeles/ 16 =em
Ejemplo
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 */
} Inténtalo tú mismo " 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.
Por desgracia, todavía hay un problema con las versiones antiguas de IE. El texto se hace 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.
Use una combinación de Porcentaje y Em
La solución que funciona en todos los navegadores, es fijar un tamaño de fuente por defecto en porcentaje para el elemento <body>:
Ejemplo
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Inténtalo tú mismo " Nuestro código ahora funciona muy bien! Se muestra el mismo tamaño del texto en todos los navegadores, y permite que todos los navegadores para ampliar o cambiar el tamaño del texto!
Peso de la fuente
La font-weight propiedad especifica el peso de un tipo de letra:
Fuentes Variant
La font-variant propiedad especifica si o no un texto debe mostrarse en una fuente small-caps.
En una fuente small-caps, todas las letras minúsculas se convierten en mayúsculas. Sin embargo, las letras mayúsculas convertida aparecerá en un tamaño de letra más pequeño que las letras mayúsculas originales en el texto.
Más ejemplos
Todas las propiedades de la fuente en una declaración
Este ejemplo muestra cómo utilizar la propiedad abreviada para establecer todas las propiedades de la fuente en una declaración.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Todas las propiedades CSS de fuente
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |