La font-weight
propiedad establece el peso o grosor de una fuente y depende de las fuentes disponibles dentro de una familia de fuentes o de los pesos definidos por el navegador.
span ( font-weight: bold; )
La font-weight
propiedad acepta un valor de palabra clave o un valor numérico predefinido. Las palabras clave disponibles son:
normal
bold
bolder
lighter
Los valores numéricos disponibles son:
100
200
300
400
500
600
700
800
900
El valor de la palabra clave se normal
asigna al valor numérico 400
y el valor se bold
asigna 700
.
Para ver cualquier efecto usando valores distintos de 400
o 700
, la fuente que se usa debe tener caras integradas que coincidan con esos pesos especificados.
Si una fuente tiene una versión en negrita ("700") o normal ("400") como parte de la familia de fuentes, el navegador la utilizará. Si no están disponibles, el navegador imitará su propia versión en negrita o normal de la fuente. No imitará los otros pesos no disponibles. Las fuentes suelen utilizar nombres como "Regular" y "Light" para identificar los pesos de fuente alternativos.
La siguiente demostración demuestra el uso de valores de peso alternativos:
¡Mira este bolígrafo!
La demostración anterior utiliza la fuente gratuita Open Sans, incrustada con la API de Google Web Fonts. La fuente se carga con todos los pesos de fuente disponibles y, por lo tanto, utilizando la font-weight
propiedad, los diferentes pesos disponibles se muestran como se describe en el texto de cada párrafo. Los pesos no disponibles simplemente muestran el peso lógicamente más cercano.
Las fuentes comunes como Arial, Helvetica, Georgia, etc. no tienen pesos distintos de 400
y 700
. Entonces, la misma demostración que se muestra con una de esas fuentes mostraría solo dos pesos en los nueve párrafos.
Usar palabras clave "más atrevidas" y "más ligeras"
Los valores de las palabras clave bolder
y lighter
son relativos al peso de fuente calculado del elemento principal. El navegador buscará el peso "más audaz" o "más ligero" más cercano, dependiendo de lo que esté disponible en la familia de fuentes, de lo contrario, simplemente elegirá "400" o "700", dependiendo de cuál tenga más sentido.
Los elementos secundarios no heredarán los valores de las palabras clave “más audaces” y “más ligeros”, sino que heredarán el peso calculado.
Soporte del navegador
Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
---|---|---|---|---|---|---|
Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos |