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 Código CSS: Asegúrese de probar el ejemplo anterior con una línea de varios pesos para que el efecto de este valor sea claro. La propiedad acepta Determine el peso normal de la línea. Este valor es equivalente a Determina el grosor de la línea. Este valor es equivalente a Elija una versión más delgada del elemento principal (de los pesos de fuente disponibles). Elija una versión más gruesa del elemento principal (de los pesos de fuente disponibles). Valores numéricos de peso de fuente para fuentes que proporcionan pesos mayores que La declaración anterior significa que si la línea proporciona dos pesos, son La siguiente tabla mostrará lo que sucederá cuando use las dos palabras reservadas Los valores numéricos (de 100 a 900) están asociados con nombres comunes para pesos:font-weight con múltiples valores, donde mostraremos el párrafo por peso bold, un elemento bold, y el elemento dentro del elemento lighter).< p > la fuente es gruesa
< div > La fuente es demasiado gruesa < br />
< span > La fuente es demasiado delgada
p {
font-weight: bold;
}
div {
font-weight: 600;
}
span {
font-weight: lighter;
}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
font-weightsolo una de las siguientes palabras reservadas.normal
400.bold
700.lighter
bold
Valores
100, 200, 300, 400, 500, 600, 700, 800 y 900normal y bold. Si no hay ningún peso disponible, utilizará el siguiente algoritmo para determinar qué peso mostrar:500, se usará el peso más cercano y, de lo contrario, se usará el peso más liviano más cercano.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.400, se usa el peso 500, y si el peso no está 500 disponible, la regla para pesos menores a 400.500, se usa el peso 400, y si el peso no está 400 disponible, la regla para pesos menores a 400.normal y bold, entonces los pesos son de 100 a 500 normaly de 600 a 900 bold.Significado de los pesos relativos
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
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
font que establece los valores de la font-style, font-stretch, font-size, font-size-adjust y line-height.color que establece el valor de color de los elementos.
