Definición | Establece el grosor de cada letra |
---|---|
Valores permitidos | Uno y sólo uno de los siguientes valores:
|
Valor inicial | normal |
Se aplica a | Todos los elementos |
Válida en | medios visuales |
Se hereda | si |
Definición en el estándar | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight |
La propiedad font-weight
permite establecer el grosor con el que se muestran las letras del texto. Normalmente, la propiedad font-weight
se emplea para mostrar un texto en negrita (valor bold
):
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dignissim. Pellentesque id pede vitae pede ultricies gravida. Sed vulputate. Vestibulum quis ipsum. Aenean nec quam. Sed ultrices tempor massa.</p>.
El otro uso habitual de la propiedad font-weight
es el de mostrar con un estilo normal un texto que originalmente se mostraba en negrita, como por ejemplo la etiqueta <strong>
de HTML:
Además de los valores bold
y normal
, la propiedad font-style
define los valores relativos lighter
(más delgado) y bolder
(más grueso). La referencia que se toma para hacer la letra más o menos gruesa es el grosor heredado desde el elemento contenedor.
En el siguiente ejemplo, se muestran los diferentes resultados que producen los valores lighter
y bolder
en función del grosor de la letra del elemento contenedor:
<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer adipiscing elit.</span></p>.
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="lighter">consectetuer adipiscing elit.</span></p>.
<p style="font-weight: normal;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer adipiscing elit.</span></p>.
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, <span font-weight="bolder">consectetuer adipiscing elit.</span></p>.
En el ejemplo anterior, los navegadores determinan el grosor de la letra del elemento contenedor (en este caso, el párrafo) y aumentan (bolder
) o disminuyen (lighter
) su grosor en el elemento interior (en este caso, el <span>
). En realidad, esto es sólo la explicación teórica de lo que deberían hacer los navegadores, ya que en la práctica los resultados son muy diferentes.
El principal problema de la propiedad font-weight
es que casi ningún tipo de letra utilizado por los usuarios normales dispone de varios grosores diferentes. De hecho, la mayoría de sus fuentes sólo disponen de estilo normal (valor normal
) y estilo negrita (valor bold
). Por lo tanto, hasta que todos los tipos de letra no incorporen varios grosores diferentes, los valores bolder
y lighter
carecen de utilidad práctica.
Además, las fuentes que disponen de muchos grosores diferentes, utilizan una nomenclatura que no es estándar y que por tanto, varía de un fuente a otra. Si se toma por ejemplo un grosor que parece negrita, el nombre de ese grosor puede ser bold
, regular
, roman
, medium
, semiblod
o black
dependiendo del tipo de letra.
Por ese motivo, la propiedad font-weight
no utiliza palabras para referirse a cada grosor, sino que define nueve valores numéricos que van desde el 100
hasta el 900
. El valor normal
corresponde al valor numérico 400
y el valor bold
corresponde al valor numérico 700
.
El estándar de CSS 2.1 explica que cada valor numérico indica que ese grosor es al menos tan grueso como el anterior valor numérico. En el siguiente ejemplo se muestran nueve párrafos con distintos grosores, aunque en la práctica los navegadores sólo muestran dos grosores diferentes:
<p style="font-weight: 100;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 200;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 300;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 500;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 600;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 700;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 800;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
<p style="font-weight: 900;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>.
Cuando un tipo de letra sólo dispone del estilo normal y del estilo negrita, los valores numéricos 100
, 200
, 300
, 400
y 500
corresponden al estilo normal y los valores numéricos 600
, 700
, 800
y 900
corresponden al estilo en negrita.
La correspondencia entre los grosores definidos por cada tipo de letra y los valores numéricos de la propiedad font-weight
dependen de cada navegador. No obstante, se aplican algunas reglas generales como las siguientes:
Medium
y otro tipo llamado Book
, Regular
, Roman
o Normal
, el estilo Medium
se asigna al valor numérico 500
.Bold
normalmente corresponde al valor numérico 700
.500
no se ha asignado, se asigna al mismo estilo que el valor 400
600
, 700
, 800
y 900
no se han asignado, se asignan al siguiente grosor disponible (normalmente equivalente al valor bold
). Si no se dispone de ningún otro grosor, se asignan al estilo correspondiente al grosor anterior (normalmente equivalente al valor normal
).100
, 200
y 300
no se han asignado, se asignan al anterior grosor disponible. Si no se dispone de un grosor anterior, se asignan al grosor siguiente.Si por ejemplo se dispone de un tipo de letra con cuatro grosores:
Tipo de letra | Tamaño asignado | Tamaños adicionales asignados |
---|---|---|
NombreDeTipoLetra Regular | 400 | 100 , 200 , 300 |
NombreDeTipoLetra Medium | 500 | - |
NombreDeTipoLetra Bold | 700 | 600 |
NombreDeTipoLetra Heavy | 800 | 900 |
Si por ejemplo se dispone de un tipo de letra con seis grosores:
Tipo de letra | Tamaño asignado | Tamaños adicionales asignados |
---|---|---|
NombreDeTipoLetra Book | 400 | 100 , 200 , 300 |
NombreDeTipoLetra Medium | 500 | - |
NombreDeTipoLetra Bold | 700 | 600 |
NombreDeTipoLetra Heavy | 800 | - |
NombreDeTipoLetra Black | 900 | - |
NombreDeTipoLetra ExtraBlack | - | - |
La propiedad font-weight
es una de las propiedades más infrautilizadas de CSS. Las limitaciones de los navegadores y de las fuentes que utilizan los usuarios normales, impiden un correcto funcionamiento más allá de los valores normal
y bold
.