CSS taip pat teikia daugybę savybių šrifto išdėstymui prisitaikyti. Jos apima šrifto rūšį, šrifto stilių ir šešėlio savybes.
Tarp CSS šrifto savybių gali būti nurodyti šrifto rūšis, stilius ir svoris. Šios savybės, žinoma, yra naudingos pagrindinai HTML elementams, kuriuose yra tekstas (p, i ir pan.). Tačiau jas galima naudoti ir lentelėms.
Naudojant font-family, galima nurodyti naudojamą šriftą.
<!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>Rezultatas naršyklėje atrodys taip:
Tipiniai šriftai yra Arial, Helvetica ir Times Roman. CSS savybė font-family leidžia nustatyti pageidaujamus šriftus. Nurodžius kelis šriftus, svarbu nurodyti tinkamą eiliškumą. Jei pirmas nurodytas šriftas yra prieinamas, jis bus naudojamas. Norimus šriftus reikia atskirti kableliais. Pabaigoje paprastai paskirta vadinamai bendrinei šeimai. Nurodydami tokį bendrinį šriftą, naršyklėms teikiate galimybę pasirinkti šriftą, kuris bent kiek atitinka nurodytą.
• serif = šriftas su serifais
• sans-serif = šriftas be serifų
• cursive = kursyvinis šriftas
• fantasy = šriftas netradiciniam šriftui
• monospace = šriftas su vienodai storomis raidėmis.
Šrifto stilius
Naudodamiesi savybe font-style, galite nustatyti šrifto stilių. Jei pasirinktas šriftas tai leidžia, galite būti tyčia kursyvu naudojant reikšmę italic.
Kiti šriftai gali būti pasvirę naudojant oblique.
Kita CSS savybė, kuri leidžia keisti šrifto vaizdą, vadinama font-variant. Jos pagalba galima nurodyti taip vadinamus kapitelius.
Tai daroma priskiriant font-variant reikšmę small-caps.
Šriftų dydis
Labai svarbu nurodyti šrifto dydį. CSS suteikia savybę font-size šiam tikslui. Šrifto dydžius gali būti nurodytas įvairiomis vienetais.
• EM
• REM
• Taškai
• Procentai
• Raktiniai žodžiai
Vartojant kai kuriuos raktinius žodžius, galimos šios variantai:
• xx-small – labai, labai mažas
• x-small – labai mažas
• small – mažas
• smaller – mažesnis nei tėvų elemente
• medium – vidutinis
• large – didelis
• x-large – labai didelis
• xx-large – labai, labai didelis
• larger – didesnis nei tėvų elemente
Čia pavyzdys, kaip nustatyti šrifto dydį:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Ir taip tai atrodo naršyklėje:
Pamirškite, kad šrifto dydžių nustatymas yra labai sudėtingas, nes skirtingi matavimo vienetai turi savo pranašumus ir trūkumus.
Gerą apžvalgą, kuriame atveju geriau naudoti kurią vienetą, galite rasti šiame puslapyje http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Tai yra visiems tiems, kurie nenori visko perskaityti: naudokite santykinę informaciją kaip em ekrane. Spausdinimo išdėstymams geriau naudoti absoliučias vienetas kaip pt.
Šrifto svoris
Žodžiu, eikime prie taip vadinamo šrifto svorio. Tai nustato šrifto storį ir stiprumą. Norėdami tai padaryti, naudokite savybę font-weight.
.fett {
font-weight:bold;
}
Naudodami šią sintaksę, pažymėtas tekstas bus paryškintas.
Galimos reikšmės yra bold (paryškintas), bolder (ypatingai paryškintas), lighter (lengviau) ir normal. Be to, leidžiamos skaitinės reikšmės 100, 200, 300, 400, 500, 600, 700, 800 ir 900. Jos svyruoja nuo labai plonos (100) iki ypatingai paryškintos (900).
Apibrėžimai suvesti į bendrą formą
Susijusios su šrifto apibrėžimais, taip pat svarbus vaidmuo yra atributas line-height, kuris leidžia nustatyti eilučių aukštį. Vėliau dar kartą išsamiau kalbėsiu apie šį atributą. Šiuo metu jis turi būti tik paminėtas, nes jis turi tam tikrą reikšmę susijus su vėliau parodytu atributu font.
Jūs galite sujungti iki šiol pateiktus šrifto rodiklius vienas su kitu. Šiam tikslui naudojamas bendras atributas font. Į jį įeina šie atskiri rodikliai arba jie į jį įtraukti.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Per font galima sujungti įvairias šrifto formatus. Tačiau jūs galite nurodyti anksčiau minėtus rodiklius, bet nebūtina naudoti visų. Privalomi šrifto dydžio ir šrifto šeimos rodikliai.
Dėka sutrumpinimo galima saugoti CSS failus trumpesnius ir aiškiau.
Norinti laikytis veiksmų eilės, kaip parodyta toliau, būtina. Jei yra nurodomi abu rodikliai font-size ir line-height, juos reikia atskirti brūkšneliu. Jei šioje vietoje nurodoma tik viena reikšmė, ji nurodo font-size.
Pavyzdys:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust buvo sukurtas siekiant galėti panašiai parodyti šrifto šriftus. Skirtingi šriftai su vienodu šriftos aukščiu turi skirtingus x aukščius. Tačiau šriftai su didesniu x aukščiu yra lengviau skaitytini. Taigi gali atsitikti, kad dokumentas bus sunkiai skaitytinas, jei pradinis šriftas neegzistuoja, o jį keičia kitas su mažesniu x aukščiu. Su font-size-adjust turėtų būti galima šį skirtumą išlyginti.
Pavyzdys:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Kitame vadovėlyje išmoksite kitas galimybes, kaip pritaikyti savo svetainės šrifto vaizdą.
