
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 inicial | normal |
---|---|
Aplicado a | Todos los artículos. |
Heredable | Sí |
Móvil | Sí |
Valor calculado | La 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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 2.0 | 1.0 | 3,0 | 3,5 | 1.3 |
Características generales
La propiedad acepta font-weight
solo 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 peso500
, y si el peso no está500
disponible, la regla para pesos menores a400
. - Si el peso es igual
500
, se usa el peso400
, y si el peso no está400
disponible, la regla para pesos menores a400
.
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
normal
y 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 heredado | más audaz | encendedor |
---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
Nombres comunes para pesos
Los valores numéricos (de 100 a 900) están asociados con nombres comunes para pesos:
Valor digital | Nombre común |
---|---|
100 | Thin |
200 | Extra Light |
300 | Light |
400 | Normal |
500 | Medium |
600 | Semi Bold |
700 | Bold |
800 | Extra Bold |
900 | Heavy |
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 lafont-style
,font-stretch
,font-size
,font-size-adjust
yline-height
. - La página de propiedades
color
que establece el valor de color de los elementos.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS