Características font-weight en CSS

por
Características font-weight en CSS

La propiedad font-weight CSS establece el «peso» de la fuente. Los pesos disponibles para usar en una fuente dependen del tipo de fuente utilizada font-family, ya que algunas fuentes solo ofrecen dos versiones: normal y bold.

Funciones font-weight css

Valor inicialnormal
Aplicado aTodos los artículos.
HeredableSí
MóvilSí
Valor calculadoLa palabra reservada o el valor numérico especificado, excepto cuando bolder y se lighter convierten a valores reales.
/* palabras reservadas */ 
font-weight: normal;
font-weight: bold;
/* palabras clave relativas al elemento padre */ 
font-weight: lighter;
font-weight: bolder;
/* valores numéricos */ 
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;

Ejemplos y aplicaciones en código

Un ejemplo de uso de la propiedad font-weight con múltiples valores, donde mostraremos el párrafo <p> por peso bold, un elemento <div> será más grueso pero menos grueso que bold, y el elemento <span> dentro del elemento <div> será un grado más claro que él ( lighter).

< p > la fuente es gruesa </ p >
< div > La fuente es demasiado gruesa < br /> 
  < span > La fuente es demasiado delgada </ span > 
</ div >

Código CSS:

p {
  font-weight: bold;
}
div {
 font-weight: 600;
}
span {
  font-weight: lighter;
}

Asegúrese de probar el ejemplo anterior con una línea de varios pesos para que el efecto de este valor sea claro.

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico2.01.03,03,51.3

Características generales

La propiedad acepta font-weightsolo una de las siguientes palabras reservadas.

normal

Determine el peso normal de la línea. Este valor es equivalente a 400.

bold

Determina el grosor de la línea. Este valor es equivalente a 700.

lighter

Elija una versión más delgada del elemento principal (de los pesos de fuente disponibles).

bold

Elija una versión más gruesa del elemento principal (de los pesos de fuente disponibles).

Valores 100, 200, 300, 400, 500, 600, 700, 800 y 900

Valores numéricos de peso de fuente para fuentes que proporcionan pesos mayores que normal y bold. Si no hay ningún peso disponible, utilizará el siguiente algoritmo para determinar qué peso mostrar:

  • Si el peso es mayor que 500, se usará el peso más cercano y, de lo contrario, se usará el peso más liviano más cercano.
  • Si el peso es menor que 400, usará el peso más cercano que sea más liviano que él, si está disponible, y si no está disponible, usará el peso más cercano que sea más pesado que él.
  • Si el peso es igual 400, se usa el peso 500, y si el peso no está 500 disponible, la regla para pesos menores a 400.
  • Si el peso es igual 500, se usa el peso 400, y si el peso no está 400 disponible, la regla para pesos menores a 400.

La declaración anterior significa que si la línea proporciona dos pesos, son normal y bold, entonces los pesos son de 100 a 500 normaly de 600 a 900 bold.

Significado de los pesos relativos

La siguiente tabla mostrará lo que sucederá cuando use las dos palabras reservadas lighter o bolder:

Valor heredadomás audazencendedor
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Nombres comunes para pesos

Los valores numéricos (de 100 a 900) están asociados con nombres comunes para pesos:

Valor digitalNombre común
100Thin
200Extra Light
300Light
400Normal
500Medium
600Semi Bold
700Bold
800Extra Bold
900Heavy

Estructura font-weight css

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

Consulte también

  • La página de propiedades font que establece los valores de la font-style, font-stretch, font-size, font-size-adjust y line-height.
  • La página de propiedades color que establece el valor de color de los elementos.