La propiedad CSS Font se utiliza para controlar el aspecto de los textos. Mediante el uso de la propiedad de fuente CSS, puede cambiar el tamaño, el color, el estilo y más del texto. Ya has estudiado cómo poner el texto en negrita o subrayado. Aquí también sabrás cómo cambiar el tamaño de tu fuente usando porcentaje.
Estos son algunos atributos de fuente importantes:
1) Color de fuente CSS
El color de fuente CSS es un atributo independiente en CSS, aunque parece que forma parte de las fuentes CSS. Se utiliza para cambiar el color del texto.
Existen tres formatos diferentes para definir un color:
- Por un nombre de color
- Por valor hexadecimal
- Por RGB
En el ejemplo anterior, hemos definido todos estos formatos.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Pruébalo ahora Producción:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Tamaño de fuente CSS
La propiedad de tamaño de fuente CSS se utiliza para cambiar el tamaño de la fuente.
Estos son los posibles valores que se pueden utilizar para establecer el tamaño de fuente:
| Valor del tamaño de fuente | Descripción |
|---|---|
| xx-pequeño | se utiliza para mostrar el tamaño de texto extremadamente pequeño. |
| x-pequeño | se utiliza para mostrar el tamaño de texto extra pequeño. |
| pequeño | Se utiliza para mostrar un tamaño de texto pequeño. |
| medio | Se utiliza para mostrar un tamaño de texto mediano. |
| grande | Se utiliza para mostrar texto de gran tamaño. |
| extra grande | se utiliza para mostrar un tamaño de texto extra grande. |
| xx-grande | Se utiliza para mostrar un tamaño de texto extremadamente grande. |
| menor | se utiliza para mostrar un tamaño de texto comparativamente más pequeño. |
| más grande | se utiliza para mostrar un tamaño de texto comparativamente más grande. |
| tamaño en píxeles o % | Se utiliza para establecer el valor en porcentaje o en píxeles. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Pruébalo ahora
Producción:
Este tamaño de fuente es extremadamente pequeño.
Este tamaño de fuente es extra pequeño.
declaración de caso de java
Este tamaño de fuente es pequeño.
Este tamaño de fuente es mediano.
Este tamaño de fuente es grande.
Este tamaño de fuente es extra grande.
Este tamaño de fuente es extremadamente grande.
Este tamaño de fuente es más pequeño.
Este tamaño de fuente es mayor.
Este tamaño de fuente está establecido en 200%.
Este tamaño de fuente es de 20 píxeles.
4) Estilo de fuente CSS
La propiedad de estilo de fuente CSS define qué tipo de fuente desea mostrar. Puede ser cursiva, oblicua o normal.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Pruébalo ahora Producción:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Variante de fuente CSS
La propiedad de variante de fuente CSS especifica cómo configurar la variante de fuente de un elemento. Puede ser normal y de pequeña capitalización.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Pruébalo ahora Producción:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Peso de fuente CSS
La propiedad de peso de fuente CSS define el peso de la fuente y especifica qué tan negrita está una fuente. Los valores posibles de peso de fuente pueden ser normal, negrita, más negrita, más clara o numéricos (100, 200..... hasta 900).
Esta fuente está en negrita.
Esta fuente es más audaz.
Esta fuente es más clara.
Esta fuente tiene un peso de 100.
Esta fuente tiene un peso de 200.
Esta fuente tiene un peso de 300.
Esta fuente tiene un peso de 400.
Esta fuente tiene un peso de 500.
Esta fuente tiene un peso de 600.
Esta fuente tiene un peso de 700.
Esta fuente tiene un peso de 800.
Esta fuente tiene un peso de 900.
Pruébalo ahoraProducción:
Esta fuente está en negrita.
Esta fuente es más audaz.
Esta fuente es más clara.
Esta fuente tiene un peso de 100.
Esta fuente tiene un peso de 200.
Esta fuente tiene un peso de 300.
Esta fuente tiene un peso de 400.
Esta fuente tiene un peso de 500.
Esta fuente tiene un peso de 600.
Esta fuente tiene un peso de 700.
Esta fuente tiene un peso de 800.
Esta fuente tiene un peso de 900.