CSS Font
CSS "font" omadused määratlevad teksti kirjastiili.
Css'i abil saad muuta teksti suurust, värvi, stiili jne. Arvatavasti oled juba tuttav sellega kuidas muuta teksti paksuks või siis kaldu (italic). Oluline on siiski kerge loetavus ja huvitav sisu, mitte vorm.
Näited
Teksti kirjastiil
Selles näites demonstreeritakse, kuidas määrata teksti kirjastiili.
Alapealkirja stiil
Selles näites demonstreeritakse, kuidas määrata teksti alapealkirja stiili.
Teksti suurus
Selles näites demonstreeritakse, kuidas määrata teksti suurust.
Teksti kohandamine
Selles näites demonstreeritakse, kuidas kohandada teksti suurust, kasutades "font-size-adjust" elementi.
Teksti stiil
Selles näites demonstreeritakse, kuidas määrata teksti stiili.
Teksti variant
Selles näites demonstreeritakse, kuidas määrata teksti kuju, kasutades "font-variant" elementi.
Teksti paksus
Selles näites demonstreeritakse, kuidas määrata teksti paksust.
Teksti omadused ühes deklaratsioonis
Selles näites demonstreeritakse, kuidas teksti omadused kirjutada kõik ühte deklaratsiooni.
Pane tähele: Haruldasi font'e ei pruugi kõik brauserid toetada. Seepärast on soovitav kasutada enam-levinuid font'e (näiteks: Arial, San Serif, Verdana jne.). Kui brauser ei toeta font'i siis valitakse see vaikimisi.
Võibolla oled kuulnud v. lugenud veebis, et <font> märgis pole enam kasutuses ning soovitatakse see asendada millegi muuga. Tõsiasi on see, et enamik brausereid toetavad seda märgist ning arvatavasti veel pikka aega. Minu soovitus oleks siiski edaspidi kasutada alternatiiseid meetodeid kirjastiili muutmiseks.
CSS'is saab teksti kujundamiseks kasutada Font Face märgist, kus "face" on atribuut.
Vaatame näidet:
<font face="garamond, times"> see siin pole "sans-serif" kirjastiil </font>
Ning tulemus on selline:
see siin pole "sans-serif" kirjastiil
Sama tulemuse annab ka selline kirjaviis:
<span tyle="font-family : garamond, times;"> see siin pole "sans-serif" kirjastiil </span>
Tulemus peaks olema selline:
see siin pole "sans-serif" kirjastiil
Muudame teksti värvi
Lisame lihtsalt atribuudi "color" ja sellele väärtuse (värvikood v. värvinimi).
<font color="#9933ff">see kiri on purpuri värvi
Tulemus peaks olema selline:
see kiri on purpuri värvi
Saame muuta ka teksti taustavärvi:
<span style="background-color : #9933ff;"> selle teksti taust on purpuri värvi </span>
Tulemus peaks olema selline:
selle teksti taust on purpuri värvi
Muudame teksti suurust
Kirjutame nii:
<font-size="+1" see font on ühe võrra suurem </font>
Tulemus peaks olema selline:
see font on ühe võrra suurem
CSS'i abil muudame fondi suurust sõltuvalt standarteksti suurusest:
<span style="font-size : x-large;"> see tekst on väga suur </span> <span style="font-size : 13pt"> see tekst on 13pt suurune </span> <span style="font-size : 13px"> see tekst on 13px suurune </span>
Tulemus peaks olema selline:
see tekst on väga suur
see tekst on 13pt suurune
see tekst on 13px suurune
Siin on veel mõned nipid kirjastiili muutmiseks mida pole lihtsa <font> märgisega võimalik saavutada:
<p style="text-decoration : underline;"> see tekst on allajoonitud </p> <p style="text-align : right;"> see tekst on nihutatud paremale </p> <p style="text-indent : 15px;"> selle teksti taane on 15px </p> <p style="text-transform : capitalize;"> see tekst on suurte algustähtedega </p> <p style="text-transform : uppercase;"> see tekst on suurte tähtedega </p>
Tulemus peaks olema selline:
see tekst on allajoonitud
see tekst on nihutatud paremale
selle teksti taane on 15px
see tekst on suurte algustähtedega
see tekst on suurte tähtedega
Nagu sa näed pole "font" märgisest loobumine raske sest CSS annab palju võimalusi tekstiga manipuleerida.
Kasulikud näpunäited
Fondi suuruse määramiseks kasutatakse tavaliselt piksel väärtust. Juhul kui sinu veebilehe külastaja on oma brauseri fondi suuruse seadistanud mingi teise väärtusega on võimalik, et disaini kuju võib muutuda (Vaikimisi on brauseri fondi suurus 15). Selle probleemi saab lahendada nii, et fondi suurus määratakse protsentides. S.t. et vaikimisi on brauseri seadistus 100%. Alla 100% on tekst väiksem ja üle 100% on tekst suurem. Eriti kasulik on see kui külastaja kasutab Mac arvutit.
Näiteks: p{font: 100% Arial; }
Tingimata peavad olema määratud mõlemad, nii suurus kui ka kirja-stiil ja just sellises järjekorras.
| Omadus | Kirjeldus | Väärtus | font | Omadus, mis võimaldab kirjastiili kujunduse kirjutada ühte deklaratsiooni | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
|---|---|---|
| font-family | Määratleb prioriteetsed kirjastiili nimed | family-name generic-family |
| font-size | Määratleb fondi suuruse | xx-small x-small small medium large x-large xx-large smaller larger length % |
| font-style | Määratleb fondi stiili | normal italic oblique |
| font-variant | Kuvab teksti väikeste tähtedega või siis normaalsel kujul | normal small-caps |
| font-weight | Määratleb fondi "raskuse" | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
