Font-weight - Trucos CSS

Anonim

La font-weightpropiedad 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-weightpropiedad 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 normalasigna al valor numérico 400y el valor se boldasigna 700.

Para ver cualquier efecto usando valores distintos de 400o 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-weightpropiedad, 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 400y 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 boldery lighterson 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