Para poner un texto en negrita en CSS usamos la propiedad font-weight, de esta forma indicamos al navegador el grueso o el peso visual de la letra. Según el tipo de letra, este peso irá de normal a bold, aclarando que no todas las tipografías tienen su versión bold.

negrita en css
El valor de font-weight pueden ser unos números de 100 a 900 o unos valores ya preestablecidos: normal, bold, lighter y bolder.
Valores de negrita en css
Con números de 100 en 100 hasta 900:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
font-weight: normal; font-weight: bold; /* Relativo al padre */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Valores globales */ font-weight: inherit; font-weight: initial; font-weight: unset; |
Valores
-
- normal: sería el equivalente a la variante regular en las tipografías, un font-weight: 400 y un font-weight: normal son lo mismo.
- bold: corresponde a la variante bold en las tipografías, un font-weight: 700 y un font-weight: bold son lo mismo.
- lighter: sería la variante light en las tipografías, un font-weight: 200-300 y un font-weight: lighter son lo mismo.
- bolder: corresponde a la variante ultrabold en las tipografías, un font-weight: 800-900 y un font-weight: bolder son lo mismo.
- 100, 200, 300, 400, 500, 600, 700, 800, 900
. Pesos numéricos para las fuentes que nos permiten más flexibilidad de lo normal, permitiendo usar una variante semi-bold por ejemplo o ultralight de una fuente.
Ejemplo con una tipografía básica:
Font-weight bold
Use only one cookie for all transactions that are joined using a pipe ( “|” ) symbol in order to avoid assigning a cookie to each transaction. Now, the ongoing transaction ID will be added to this newly created transaction cookie every time a transaction is sent to Google Analytics.
La compatibilidad de la propiedad css3 font-weight es con todos los navegadores y versiones. Como bien sabréis, si queréis darle un toque bold a una palabra por HTML simplemente usad las etiquetas «b» o «strong», esta última es mejor para SEO ya que da más contexto a la frase.
