A CSS Font tulajdonság a szövegek megjelenésének szabályozására szolgál. A CSS font tulajdonság használatával módosíthatja a szöveg méretét, színét, stílusát és még sok mást. Már tanulmányozta, hogyan lehet a szöveget félkövérre vagy aláhúzni. Itt azt is tudni fogja, hogyan kell átméretezni a betűtípust százalékos értékkel.
Íme néhány fontos font attribútum:
1) CSS betűtípus színe
A CSS betűtípus színe egy önálló attribútum a CSS-ben, bár úgy tűnik, hogy a CSS betűtípusok része. A szöveg színének megváltoztatására szolgál.
Három különböző formátum létezik a szín meghatározására:
- Színnév szerint
- Hexadecimális érték szerint
- RGB által
A fenti példában ezeket a formátumokat definiáltuk.
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> Tesztelje most Kimenet:
<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) CSS betűméret
A CSS betűméret tulajdonsága a betűméret módosítására szolgál.
Ezek a lehetséges értékek, amelyek segítségével beállítható a betűméret:
| Betűméret érték | Leírás |
|---|---|
| xx-kicsi | a rendkívül kis szövegméret megjelenítésére szolgál. |
| x-kicsi | az extra kis szövegméret megjelenítésére szolgál. |
| kicsi | kis méretű szöveg megjelenítésére szolgál. |
| közepes | közepes méretű szöveg megjelenítésére szolgál. |
| nagy | nagyméretű szöveg megjelenítésére szolgál. |
| x nagy | extra nagy szövegméret megjelenítésére szolgál. |
| xx-nagy | rendkívül nagy szövegméret megjelenítésére szolgál. |
| kisebb | viszonylag kisebb méretű szöveg megjelenítésére szolgál. |
| nagyobb | viszonylag nagyobb szövegméret megjelenítésére szolgál. |
| méret pixelben vagy %-ban | százalékban vagy pixelben kifejezett érték beállítására szolgál. |
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>Tesztelje most
Kimenet:
Ez a betűméret rendkívül kicsi.
Ez a betűméret rendkívül kicsi
Ez a betűméret kicsi
Ez a betűméret közepes.
Ez a betűméret nagy.
Ez a betűméret rendkívül nagy.
Ez a betűméret rendkívül nagy.
Ez a betűméret kisebb.
javascript onclick
Ez a betűméret nagyobb.
Ez a betűméret 200%-ra van állítva.
Ez a betűméret 20 pixel.
4) CSS betűstílus
A CSS Font style tulajdonság határozza meg, hogy milyen típusú betűtípust kíván megjeleníteni. Lehet dőlt, ferde vagy normál.
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> Tesztelje most Kimenet:
<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) CSS Font Variant
A CSS-betűtípus-változat tulajdonság megadja, hogyan kell beállítani egy elem betűtípus-változatát. Lehet normál és kisbetűs.
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> Tesztelje most Kimenet:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS betűtípus súlya
A CSS font súlya tulajdonság határozza meg a betűtípus súlyát, és adja meg, hogy milyen vastag legyen a betűtípus. A betűsúly lehetséges értékei lehetnek normál, félkövér, félkövérebb, világosabbak vagy számok (100, 200..... 900-ig).
Ez a betűtípus félkövér.
Ez a betűtípus merészebb.
Ez a betűtípus világosabb.
Ez a betűtípus 100 súlyú.
Ez a betűtípus 200 súlyú.
Ez a betűtípus 300 súlyú.
Ez a betűtípus 400 súlyú.
Ez a betűtípus 500 súlyú.
Ez a betűtípus 600 súlyú.
Ez a betűtípus 700 súlyú.
mi az ábécé szám
Ez a betűtípus 800 súlyú.
Ez a betűtípus 900 súlyú.
Tesztelje mostKimenet:
Ez a betűtípus félkövér.
Ez a betűtípus merészebb.
Ez a betűtípus világosabb.
Ez a betűtípus 100 súlyú.
Ez a betűtípus 200 súlyú.
Ez a betűtípus 300 súlyú.
Ez a betűtípus 400 súlyú.
Ez a betűtípus 500 súlyú.
Ez a betűtípus 600 súlyú.
Ez a betűtípus 700 súlyú.
Ez a betűtípus 800 súlyú.
Ez a betűtípus 900 súlyú.