Uno de los aspectos clave del dise o de sitios web es elegir la fuente correcta y personalizarla. Un par metro que se puede cambiar es el grosor de la fuente. En CSS, esto se puede hacer con la propiedad font-weight.
La propiedad font-weight determina la saturaci n de la fuente y puede tomar diferentes valores de 100 a 900. En este caso, los valores se pueden especificar como un n mero y palabras: normal, bold, bolder, lighter.
Tambi n puede utilizar la propiedad font-style para ajustar el grosor de la fuente, que define el estilo del texto: normal, cursiva o oblicua.
En este art culo, analizaremos todos los valores posibles de la propiedad font-weight y ofreceremos una serie de pautas para seleccionar y ajustar el grosor de la fuente en el sitio web.
- Cambiar el grosor de la fuente en CSS: una gu a detallada
- Elegir la propiedad correcta para el grosor de la fuente
- Cambiar el grosor de la fuente con los valores de la propiedad "font-weight"
- Aplicar propiedades CSS adicionales para ajustar el grosor de la fuente
Cambiar el grosor de la fuente en CSS: una gu a detallada
En CSS, hay varias formas de cambiar el grosor de la fuente para lograr el efecto Visual deseado en su sitio web. En esta gu a, veremos algunas formas b sicas:
1. Uso de la propiedad font-weight:
Una forma f cil de cambiar el grosor de la fuente es usar la propiedad font-weight. Esta propiedad le permite establecer el grosor de la fuente en uno de los varios valores disponibles: normal (grosor est ndar), bold (grosor en negrita), lighter (grosor m s peque o) o un valor num rico que indica un grosor espec fico.
Ejemplo:
p {
font-weight: bold;
}
2. Uso del valor font-weight en formato num rico:
Tambi n puede usar valores num ricos para establecer el grosor de la fuente. Los n meros entre 100 y 900 representan diferentes niveles de grosor, donde 100 es el menos gordo y 900 el m s gordo.
Ejemplo:
p {
font-weight: 600;
}
3. Uso de la propiedad font y la palabra clave bold:
La propiedad font combina varias propiedades, incluida la configuraci n de la fuente y su grosor. Puede usar la palabra clave en negrita para establecer el grosor de la fuente en negrita.
Ejemplo:
- p {
- font: bold 12px Arial, sans-serif;
}
Ejemplo:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
| p { | font-family: 'Open Sans', sans-serif; |
|---|---|
| font-weight: 700; | } |
| En conclusi n, cambiar el grosor de la fuente en CSS es una forma f cil y efectiva de crear diferentes estilos de texto en su sitio web. Use estas reglas y experimente con diferentes estilos de fuente para encontrar el m s adecuado para sus necesidades. | |
| Elegir la propiedad correcta para el grosor de la fuente | La propiedad font-weight determina el grosor de la fuente del elemento. Puede tomar diferentes significados, tales como: |
| normal-especifica el grosor normal de la fuente | bold-establece el grosor de fuente en negrita |
| bolder-establece un grosor de fuente m s audaz | lighter-establece un grosor de fuente m s fino |
| 100, 200, 300, ..., 900 especifica los valores num ricos para el grosor de la fuente, donde 100 es el grosor m s delgado y 900 es el grosor m s gordo | Por ejemplo, si desea establecer un grosor de fuente en negrita para un p rrafo, puede usar el siguiente c digo CSS: |
| p { font-weight: bold; } | Tambi n puede combinar la propiedad font-weight con otras propiedades, como font-family y font-size, para crear el estilo de texto que desee. |
Es importante tener en cuenta que no todas las Fuentes admiten todos los valores de grosor (por ejemplo, algunas Fuentes pueden no tener una versi n en negrita). En tales casos, el navegador aplicar el grosor de fuente m s cercano disponible.
Tambi n hay otras formas de cambiar la apariencia del texto, como usar la propiedad font-style para establecer la inclinaci n de la fuente (por ejemplo,
Por lo tanto, elegir la propiedad correcta para el grosor de la fuente depende de sus preferencias y requisitos de dise o de p gina web. Utilice esta gu a para elegir la forma m s adecuada de cambiar el grosor de la fuente en CSS.
Ejemplo de uso de los valores de la propiedad "font-weight":
100
- Grosor de fuente normal
- 900
- Grosor de fuente normal
- lighter
- M s negrita
Adem s de la propiedad CSS b sica
Una de estas propiedades es
- Ejemplo de uso de la propiedad
font-stretch: ultra-condensed;