CSS piedāvā daudzas īpašības teksta izskata pielāgošanai. Tos var izmantot, lai noteiktu fontu, tā stilu un ēnas.
Daudzas no CSS fonta īpašībām ietver informāciju par fonta veidu, stilu un svērumu. Šīs īpašības ir saprātīgas galvenokārt HTML elementiem, kas satur tekstu (p, i utt.). Tomēr tās var izmantot arī tabulām.
Ar font-family var noteikt, kuru fontu izmantot.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Iegūtais rezultāts izskatās pārlūkā šādi:
Tipiskas fonta šriftu klātienes ir, piemēram, Arial, Helvetica un Times Roman. CSS īpašība font-family nosaka vēlamo fontu. Izmantojot vairākus fontus, ir svarīga secība. Ja pirmais norādītais fonts ir pieejams, tiek izmantots tas. Vēlamo fontu ir jānorāda, atdalojot tos ar komatiem. Parasti pēdējai norādei ir jābūt saukātajai ģeneriskajai fontu saimei. Izmantojot šo saukto ģenerisko fontu saimi, pārlūkiem tiek dota iespēja izvēlēties fontu, kas vismaz cieši atbilst norādītajam.
• serif = fonts ar serifiem
• sans-serif = fonts bez serifiem
• cursive = fonts kursīvam rakstam
• fantasy = fonts neparastam rakstam
• monospace = fonts ar vienādu biezumu visiem simboliem.
Fonta stils
Izmantojot īpašību font-style, varat noteikt fonta stilu. Ja izvēlētais fonts atbalsta to, ar vērtību italic varat uzspiest kursīvu rakstību.
Citi fonti var tikt nodēvēti ar oblique - slīprakstu.
Nākamā CSS īpašība, kas ietekmē fonta izskatu, ir font-variant. Ar to var definēt tā sauktās kapitālšriftes.
Lai iestatītu kapitālšrifti, font-variant piešķir vērtību small-caps.
Fonta izmērs
Ļoti svarīgi ir norādīt arī fonta izmēru. CSS tam nodrošina īpašību font-size. Fontu izmēri var būt norādīti dažādās mērvienībās.
• EM
• REM
• Pikseļi
• Procenti
• Atslēgas vārdi
Kā atslēgas vārdi pieejamās varianti:
• xx-small - ļoti, ļoti mazs
• x-small - ļoti mazs
• small - mazs
• smaller - mazāks nekā vecākā elementa iekšējais teksts
• medium - vidējs
• large - liels
• x-large - ļoti liels
• xx-large - ļoti, ļoti liels
• larger - lielāks nekā vecākā elementa iekšējais teksts
Šeit ir piemērs, kā iestatīt fonta izmēru:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Un tā izskatās pārlūkā:
Lūdzu, ņemiet vērā, ka temats par fonta izmēra definēšanu ir ļoti sarežģīts, jo dažādām mērvienībām ir savas priekšrocības un trūkumi.
Labu pārskatu par to, kuru mērvienību labāk izmantot, atrodat šajā lapā: http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Tāpēc visiem tiem, kuri to nevēlas lasīt, iesaku izmantot relativās norādes, piemēram, em, ekrāna attēlojumam. Drukājamam dizainam labāk izvēlēties absolūtas vienības, piemēram, pt.
Fonta svērums
Turpinām ar t.s. fonta svērumu. Ar to nosaka fonta biezumu un stiprumu. Tam izmanto īpašību font-weight.
.fett {
font-weight:bold;
}
Šī sintakse šo tekstu parāda ar treknrakstu.
Possible vērtības ir bold (treknraksts), bolder (īpaši treknraksts), lighter (plānāks) un normal. Turklāt ir atļauti numeriskie vērtības 100, 200, 300, 400, 500, 600, 700, 800 un 900. Tie pārstāv no ļoti plāna (100) līdz īpaši treknam (900).
Definīciju apkopojums
Sakarā ar burtu definīcijām svarīga ir arī line-height īpašība, kas ļauj definēt rindu augstumu. Vēlāk es vēlreiz detalizēti pieminēšu šo īpašību. Šajā punktā to tikai jāpiemin, jo tā spēlē svarīgu lomu saistībā ar pēc tam uzrādīto font īpašību.
Jūs varat kombinēt līdz šim iepazītās informācijas par fontu izvadi. Tādai mērķim tiek izmantota vispārīgā font īpašība. Tā ietver sekojošās atsevišķās norādes vai tos iekļauj.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Izmantojot font, varat kombinēt dažādus fonta formatējumus. Jūs varat norādīt iepriekš minētās īpašības, bet ne visus ir jāizmanto. O obligātas ir izmēra un ģimenes fonta īpašības.
Tāpēc īstermiņā CSS faili var palikt īsāki un pārskatāmāki.
Tomēr jāievēro secība, kā tā ir parādīta zemāk. Ja tiks norādītas abas īpašības font-size un line-height, tās jāatdala ar slīpsvītru. Ja šajā punktā tiek norādīta tikai viena vērtība, tā attiecas uz font-size.
Piemērs:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust tika izstrādāts, lai fontus varētu parādīt gandrīz vienādus lielumā. Dažādi fonti ar vienādu burtu augstumu ir ar dažādām x-augstumiem. Tomēr fonti ar lielāku x-augstumu ir vieglāk lasāmi. Tāpēc var gadīties, ka dokuments ir grūti lasāms, ja sākotnējais fonta veids nav pieejams un to aizstāj cits ar mazāku x-augstumu. Ar font-size-adjust šī atšķirība var tikt izlīdzināta.
Piemērs:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Nākamajā pamācībā jūs uzzināsit vairākas iespējas, kā pielāgot jūsu vietnes tekstuālo attēlojumu.
