El dise o de texto es una de las tareas m s importantes del desarrollo web. La elecci n de la fuente y su dise o depende no solo de la legibilidad y la comodidad de la percepci n de la informaci n, sino tambi n de la impresi n est tica del sitio o la aplicaci n. Los desarrolladores web y los dise adores est n constantemente buscando nuevas formas de dar m s expresividad al texto, y una de esas formas es aumentar la negrita de la fuente.
En CSS, hay varias formas de hacer que la fuente sea a n m s audaz. Una de las formas m s comunes es usar la propiedad font weight. Esta propiedad le permite controlar el contenido en negrita de la fuente en el rango de 100 a 900, donde 100 corresponde al tipo de letra menos en negrita y 900 al tipo de letra m s en negrita. Sin embargo, a veces el contenido de negrita m ximo disponible con la propiedad font-weight puede no ser suficiente para la tarea.
Para superar las limitaciones de la propiedad font-weight y hacer que la fuente sea a n m s audaz, puede usar otros m todos. Uno de estos m todos es el uso de la sombra de texto. Cuando se aplica una sombra al texto, su contenido de grasa se mejora visualmente. Las diferentes combinaciones de sombras son muy vitales y visualmente capaces de cambiar los efectos de la fuente fuerte.
- Varias formas de aumentar la negrita de una fuente en CSS
- Uso de la propiedad font-weight
- Conexi n de una fuente adicional con m s negrita
- Aplicar un efecto de sombra para crear una impresi n grasienta
- Combinaci n de negrita de fuente con otros estilos
Varias formas de aumentar la negrita de una fuente en CSS
Los desarrolladores web a menudo buscan formas de aumentar la negrita de la fuente en CSS. Esto puede ser til cuando se necesita resaltar un texto importante o hacerlo m s visible.
En CSS, hay varias formas de aumentar la negrita de una fuente:
- Uso de la propiedad font-weight
- Uso de la propiedad text-shadow
- Uso de efectos de transici n
La primera y m s f cil forma es usar la propiedad font-weight. El valor 'bold' establece el tipo de letra en negrita. Si eso no es suficiente, se pueden usar valores num ricos entre 100 y 900. Cuanto mayor sea el n mero, m s negrita ser la fuente.
El segundo m todo es usar la propiedad text-shadow. Esta propiedad le permite agregar sombra al texto, lo que lo hace m s expresivo y audaz. Ejemplo de uso:
h1 {
h1 {
Sin embargo, utilizando s lo
font-weight: 800
lighter
e
bolder
, que se alejan del grosor de la fuente del elemento principal. Por ejemplo, si el elemento principal tiene el valor
font-weight: normal
el uso
bolder
har que la fuente sea m s gorda, y
lighter
delgado.
Otra forma de aumentar la negrita de una fuente es usar la propiedad
En general, a trav s de la propiedad
font-weight
- Conexi n de una fuente adicional con m s negrita
- Para conectar una fuente adicional, es suficiente usar la regla @font-face en CSS. BoldFont :
@font-face {
font-family: 'BoldFont';
font-weight: bold;
font-family: 'BoldFont', sans-serif;
font-weight: bold;
- }
- BoldFont . En el bloque @font-face, especifique el nombre de la fuente, su dise o y la ruta de acceso a los archivos de fuente en formato WOFF2 y WOFF.
- Luego aplicamos la fuente "BoldFont" a los elementos p con las propiedades font-family y font-weight. Especifique el car cter en negrita con el valor en negrita.
Si la fuente "BoldFont" no est disponible, el navegador usar la fuente predeterminada establecida en la propiedad font-family. En este ejemplo, hemos especificado sans-serif como fuente alternativa.
- Por lo tanto, la conexi n de una fuente adicional con un dise o m s audaz le permite crear un dise o de texto espectacular y resaltarlo visualmente.
Aplicar un efecto de sombra para crear una impresi n grasienta