CSS ponuja številne lastnosti tudi za prilagajanje videza pisave. Te segajo od vrste pisave do sloga pisave in senc.
Med lastnostmi CSS za pisavo spadajo podatki o vrsti pisave, slogu pisave in teži pisave. Te lastnosti so seveda koristne predvsem za elemente HTML, v katerih je vsebina besedila (p, i itd.). Prav tako jih je mogoče uporabiti tudi za tabele.
Z uporabo font-family je mogoče določiti uporabljeno pisavo.
<!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>Rezultat v brskalniku izgleda takole:
Tipični pisavi sta na primer Arial, Helvetica in Times Roman. CSS lastnost font-family določa želene pisave. Če določite več pisav, je pomembno vrstni red. Če je prva navedena pisava na voljo, se ta uporabi. Želene pisave se ločijo z vejicami. Navadno nato določimo tudi generično pisavno družino. S tem generičnim pisavnim družinam omogočimo brskalnikom, da izberejo pisavo, ki je vsaj podobna navedeni.
• serif = pisava s serifom
• sans-serif = pisava brez serifov
• cursive = pisava za poševno pisavo
• fantasy = pisava za nenavadno pisavo
• monospace = pisava z enakimi debelinami znakov.
Slog pisave
Z uporabo lastnosti font-style lahko določimo slog pisave. Če izbrana pisava to omogoča, lahko s vrednostjo italic prisilimo poševno pisanje.
Druga pisava se lahko nagne s pomočjo oblique.
Naslednja CSS lastnost, ki vpliva na videz pisave, se imenuje font-variant. Z njo lahko določimo tako imenovane male črke.
Za to uporabimo vrednost small-caps znotraj font-variant.
Velikost pisave
Zelo pomembno je tudi določanje velikosti pisave. CSS za to ponuja lastnost font-size. Velikosti pisav je mogoče določiti v različnih enotah.
• EM
• REM
• Piksli
• Procenti
• Ključne besede
Kot ključne besede so na voljo naslednje variantne:
• xx-small – zelo, zelo majhno
• x-small – zelo majhno
• small – majhno
• smaller – manjše kot v nadrejenem elementu
• medium – srednje
• large – veliko
• x-large – zelo veliko
• xx-large – zelo, zelo veliko
• larger – večje kot v nadrejenem elementu
Tukaj je primer, kako določiti velikost pisave:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}In to je videti v brskalniku:
Upoštevajte, da je določanje velikosti pisave zelo kompleksen postopek, saj imajo različne enote svoje prednosti in slabosti.
Pregled, katero enoto izbrati glede na situacijo, najdete na strani http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Za tiste, ki se ne želite prebijati skozi branje: za prikaz na zaslonu uporabite relativne vrednosti, kot je em. Za postavitev na papir pa raje uporabite absolutne enote, kot je pt.
Teža pisave
Nadaljujemo z omembo t. i. teže pisave. S tem določamo debelino in moč pisave. Za to uporabljamo lastnost font-weight.
.fett {
font-weight:bold;
}
S tem dejanjem se označen tekst prikaže v krepkem tisku.
Možne vrednosti so bold (krepko), bolder (posebej krepko), lighter (tanjše) in normal. Prav tako so dovoljene numerične vrednosti 100, 200, 300, 400, 500, 600, 700, 800 in 900. Te segajo od izjemno tanko (100) do posebej krepko (900).
Povzetek definicij
V zvezi z definicijami pisave ima pomembno vlogo tudi lastnost line-height, preko katere se določi višina vrstice. Kasneje bom podrobneje govoril o tej lastnosti. Na tem mestu jo je treba samo omeniti, ker igra določeno vlogo v povezavi z lastnostjo font, ki bo prikazana v nadaljevanju.
Do sedaj predstavljene informacije o prikazu pisave lahko združite med seboj. Za to se uporablja splošna lastnost font. Ta vključuje naslednje posamezne informacije oziroma jih zajema.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Z lastnostjo font lahko združite različne oblikovanja pisave. Pri tem lahko navedete že prej omenjene lastnosti, vendar jih ni nujno uporabiti vse. Obvezni pa so lastnosti velikosti pisave in družine pisav.
Zahvaljujoč kratkemu zapisu je mogoče CSS datoteke krajše in preglednejše.
Vrstni red, kot je prikazan spodaj, mora biti spoštovani. Če sta zapisani lastnosti font-size in line-height, morata biti ločeni z nagnjenim poševnikom. Če je na tem mestu navedena samo ena vrednost, ta predstavlja font-size.
Primer:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust je bil razvit za približno enako veliko prikazovanje pisav. Različne pisave s enako višino črk imajo različne x-višine. Vendar so pisave z večjo x-višino bolj berljive. Lahko se zgodi, da je dokument slabo berljiv, če izvirne pisave ni in jo nadomesti druga z manjšo x-višino. Z font-size-adjust naj bi bil ta razlika lahko izravnana.
Primer:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
V naslednjem tutorialu boste spoznali dodatne možnosti, s katerimi lahko prilagodite videz besedila na svoji spletni strani.
