CSS fontu īpašības nosaka fonta veidu (Verdana, Times New Roman,
treknumu, lielumu un teksta stilu.
Starpība starp serif un Sans-Serif fonti
Par CSS fontu veidiem
CSS, ir divu veidu fontu uzvārdi:
- sugas ģimene - grupa fontu ģimenēm ar līdzīgu izskatu (piemēram, "serif" vai "Monospace")
- fontu saime - īpašu fontu ģimene (piemēram, "Times New Roman" vai "Arial")
| Generic family | Font family | Description |
|---|
| Serif |
Times New Roman
Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif |
Arial
Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace |
Courier New
Lucida Console |
All monospace characters have the same width |
 |
Piezīme: Par datoru ekrāniem, sans-serif fonti tiek uzskatīts vieglāk lasīt nekā serif fontus. |
|---|
Fontu saime
Fontu teksta saime ir noteikta ar font-family īpašību.
Font-family īpašībā var turēt vairākus fontu nosaukumus kā "atkāpšanās" sistēmu.
Ja pārlūkprogramma neatbalsta pirmo fontu, tā mēģina nākamo fontu.
Sākt ar fontu, kuru vēlaties, un ar vispārēju ģimeni beigām,
ļaut pārlūkam izvēlēties līdzīgu fontu ģenērisko zāļu ģimenē,
ja nav citu fontu, kas ir pieejami.
Piezīme : Ja no fontu saimes vārds ir vairāk nekā vienu vārdu,
tam jābūt pēdiņās, piemēram: "Times New Roman".
Vairāk nekā vienu fontu ģimene ir noteikts ar komatiem atdalītu sarakstu:
Biežāk izmanto fontu kombinācijas, skatāmies uz mūsu tīmekļa droši Fonts apvienošanas .
Fonta stils
Fonta stila īpašība ir galvenokārt izmanto, lai norādītu kursīvā.
Šis īpašums ir trīs vērtības:
- normāli - teksts tiek parādīts parasti
- slīprakstā - teksts tiek parādīts slīprakstā
- slīpi - teksts ir "tieksme" (šķībs ir ļoti līdzīgs slīprakstā, bet mazāk atbalstīta)
Piemērs
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Izmēģiniet to pats »
Fonta lielums
Font-size īpašība nosaka teksta izmēru.
Spēja pārvaldīt teksta izmēru ir ļoti svarīgi web dizainā. Tomēr,
Jums nevajadzētu izmantot fonta lielumu korekcijas,
lai punktus izskatās pozīcijas, vai pozīcijas izskatās punktos.
Vienmēr izmantojiet pareizus HTML tagus, piemēram,
<h1> - <h6> par pozīcijām un <p> rindkopās.
Font-size vērtība var būt absolūts vai relatīvs lielums.
Absolūtais lielums:
- Iestata tekstu uz norādīto lielumu
- Neļauj lietotājam mainīt teksta lielumu visās pārlūkprogrammās
- (slikti pieejamības dēļ)
- Absolūtais lielums ir noderīgi, kad fizisko izmēru izejas ir zināmas
Relatīvais lielums:
- Komplekti lielumu, salīdzinot ar apkārtējiem elementiem
- Ļauj lietotājam mainīt teksta lielumu pārlūkprogrammās
|
Piezīme: Ja jums nav jānorāda fonta lielumu, noklusējuma lielumu parastu tekstu, piemēram, punktu, ir 16px (16px = 1em). |
|---|
Ielikt fonta izmēru ar Pixels (pikseļiem)
Iestatīšana teksta lielumu ar pikseļiem sniedz Jums pilnu kontroli pār teksta izmēru:
Iepriekš minētajā piemērā ļauj Internet Explorer 9, Firefox, Chrome, Opera un Safari,
lai mainītu teksta izmēru.
Piezīme: piemērs iepriekš nedarbojas IE, iepriekšējo versiju 9.
Teksts var tikt mainīti visās pārlūkprogrammās, izmantojot tālummaiņas rīku
(tomēr, tas maina visu lapu, ne tikai tekstu).
Ielikt fonta izmēru ar Em
Lai izvairītos no izmēru maiņas problēmas ar vecākām versijām Internet Explorer,
daudzi attīstītāji izmantot em, nevis pikseļi.
Em lieluma vienība iesaka W3C.
1em ir vienāds ar fonta izmēru. Noklusējuma teksta izmērs pārlūkprogrammās ir 16px.
Tātad, noklusējuma izmērs 1em ir 16px.
Lielumu var aprēķināt no pikseļiem, lai em, izmantojot šo formulu: pikseļu / 16 = em
Piemērs
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Izmēģiniet to pats »
Iepriekšējā piemērā, teksta izmērs EM ir tāds pats kā iepriekšējā piemērā pikseļos. Tomēr, ar to em lielumu, tas ir iespējams, lai koriģētu teksta lielumu visās pārlūkprogrammās.
Diemžēl, joprojām ar vecākām versijām IE problēma. Teksts kļūst lielāks, nekā tas būtu tad, ja veikti lielāki un mazāki, nekā tas būtu tad, ja veikta mazāka.
Izmantojiet kombinācija procentiem un Em
Risinājums, kas darbojas visās pārlūkprogrammās, ir noteikt noklusējuma fonta izmēra procentos par <body> elementu:
Piemērs
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Izmēģiniet to pats »
Mūsu kods tagad darbojas lieliski! Tas parāda to pašu teksta lielumu visās pārlūkprogrammās, un ļauj visiem pārlūkiem, lai tuvinātu vai mainīt tekstu!
Vairāk Piemēri
Uzstādīt drosmi fonta
Šis piemērs parāda, kā noteikt drosmi fontu.
Uzstādīt variantu fonta
Šis piemērs parāda, kā noteikt variantu fontu.
Visi fontu īpašības vienā deklarācijā
Šis piemērs parāda, kā izmantot stenogrāfija īpašumu nosakot visu fontu rekvizītus vienā deklarācijā.
Visi CSS fontu rekvizītus
| Property | Description |
|---|
| font |
Sets all the font properties in one declaration, fontu parametru
iestatīšana vienā rindā, piemēram
p.mytitle { font: Verdana 16px bold; } |
| font-family |
Specifies the font family for text, teksta šrifts |
| font-size |
Specifies the font size of text, teksta izmērs |
| font-style |
Specifies the font style for text, |
| font-variant |
Specifies whether or not a text should be displayed in a small-caps font |
| font-weight |
Specifies the weight of a font, fonta treknums ( default, bold,
200, 400, līdz 700 ) |
|
