La propietat CSS Font s'utilitza per controlar l'aspecte dels textos. Mitjançant l'ús de la propietat del tipus de lletra CSS, podeu canviar la mida del text, el color, l'estil i molt més. Ja heu estudiat com fer el text en negreta o subratllat. Aquí, també sabràs com canviar la mida del tipus de lletra mitjançant el percentatge.
Aquests són alguns atributs importants del tipus de lletra:
1) Color de lletra CSS
El color del tipus de lletra CSS és un atribut autònom en CSS, tot i que sembla que forma part dels tipus de lletra CSS. S'utilitza per canviar el color del text.
Hi ha tres formats diferents per definir un color:
- Amb un nom de color
- Per valor hexadecimal
- Per RGB
En l'exemple anterior, hem definit tots aquests formats.
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> Prova-ho ara Sortida:
<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) Mida del tipus de lletra CSS
La propietat de mida del tipus de lletra CSS s'utilitza per canviar la mida del tipus de lletra.
Aquests són els possibles valors que es poden utilitzar per definir la mida de la lletra:
| Valor de la mida de la lletra | Descripció |
|---|---|
| xx-petit | s'utilitza per mostrar la mida del text extremadament petita. |
| x-petit | s'utilitza per mostrar la mida del text extra petita. |
| petit | s'utilitza per mostrar una mida de text petita. |
| mitjà | s'utilitza per mostrar la mida mitjana del text. |
| gran | s'utilitza per mostrar una mida de text gran. |
| x-gran | s'utilitza per mostrar una mida de text molt gran. |
| xx-gran | s'utilitza per mostrar una mida de text molt gran. |
| més petit | s'utilitza per mostrar una mida de text comparativament més petita. |
| més gran | s'utilitza per mostrar una mida de text comparativament més gran. |
| mida en píxels o % | s'utilitza per establir el valor en percentatge o en píxels. |
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>Prova-ho ara
Sortida:
Aquesta mida de lletra és extremadament petita.
Aquesta mida de lletra és molt petita
Aquesta mida de lletra és petita
Aquesta mida de lletra és mitjana.
Aquesta mida de lletra és gran.
Aquesta mida de lletra és molt gran.
Aquesta mida de lletra és extremadament gran.
Aquesta mida de lletra és més petita.
Aquesta mida de lletra és més gran.
Aquesta mida de lletra s'estableix al 200%.
Aquesta mida de lletra és de 20 píxels.
4) Estil de lletra CSS
La propietat d'estil de lletra CSS defineix quin tipus de lletra voleu mostrar. Pot ser cursiva, obliqua 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> Prova-ho ara Sortida:
<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) Variant de tipus de lletra CSS
La propietat de variant de tipus de lletra CSS especifica com establir la variant de tipus de lletra d'un element. Pot ser normal i en majúscules petites.
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> Prova-ho ara Sortida:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Pes de la lletra CSS
La propietat de pes del tipus de lletra CSS defineix el pes del tipus de lletra i especifica com és de negreta. Els possibles valors del pes de la font poden ser normals, negres, més negres, més clars o números (100, 200... fins a 900).
Aquest tipus de lletra és en negreta.
Aquest tipus de lletra és més atrevit.
Aquest tipus de lletra és més lleuger.
Aquest tipus de lletra pesa 100.
Aquest tipus de lletra pesa 200.
Aquest tipus de lletra pesa 300.
Aquest tipus de lletra té un pes de 400.
Aquest tipus de lletra té un pes de 500.
Aquest tipus de lletra té un pes de 600.
Aquest tipus de lletra té un pes de 700.
Aquest tipus de lletra té un pes de 800.
Aquest tipus de lletra té un pes de 900.
Prova-ho araSortida:
Aquest tipus de lletra és en negreta.
Aquest tipus de lletra és més atrevit.
Aquest tipus de lletra és més lleuger.
llançar cadena a int
Aquest tipus de lletra pesa 100.
Aquest tipus de lletra pesa 200.
Aquest tipus de lletra té un pes de 300.
Aquest tipus de lletra té un pes de 400.
Aquest tipus de lletra té un pes de 500.
Aquest tipus de lletra té un pes de 600.
Aquest tipus de lletra té un pes de 700.
Aquest tipus de lletra té un pes de 800.
Aquest tipus de lletra té un pes de 900.