CSS Үсгийн Фонт /Font/
CSS font шинж чанарт үсгийн өргөн нарийн, хэв маяг фонтын төрлийг зааж өгдөг.
CSS Font Families
CSS-д Үсгийн фонтыг /font family/ хоёр төрөлд хувааж авч үздэг.
- generic family ижил төстэй хэсэг бүлэг ("Serif" болон "Monospace")
- font family тодорхой хэв маягтай хэсэг бүлэг ("Times New Roman" болон "Arial")
| Generic family | Font family | Тайлбар |
|---|---|---|
| Serif |
Times New Roman |
Тэмдэгт хоорондын зайг шахдаг |
| Suns-Serif |
Arial |
Тэмдэгт хоорондын зайг шахдаг |
| Monospace |
Courier New |
Бүх тэмдэгтийн хоорондын зай ижил өргөнтэй байдаг. I үсгийг хараарай |
Тэмдэглэл: Компьютерын дэлгэцээс sans-serif фонтыг уншихад serif фонтуудаас илүү хялбар уншигддаг гэж үздэг.
Font Family
font-familyшинж чанарт үсгийн фонтыг /font family/ зааж өгнө.font-familyшинж чанарт хэд хэдэн үсгийн фонтыг "fallback" буюу уналтын систем хэлбэрээр зааж өгдөг. Энэ нь хэрэв интернет хөтөч эхний фонтыг дэмжихгүй бол дараагийн фонтыг туршиж үзнэ гэсэн санаа юм.font-familyшинж чанарт таны зааж өгсөн font-г хөтөч алийг нь ч дэмжихгүй тохиолдолд хөтчийн санал болгосон font-г автоматаар ашиглана.- Хэрэв font-н нэр нь нэгээс олон үгтэй байвал "Times New Roman" хаалтад гэж бичээд олон font-г таслалаар тусгаарлан зааж өгнө.
Жишээ нь
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
Font Style
font-style шинж чанарт текстийн хэв маягийг зааж өгнө.
Жишээ нь
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
Font Size
font-size шинж чанарт текстийн хэмжээг зааж өгнө.
Текстийн хэмжээг тохируулах нь дизайны хувьд чухал ач үүрэг гүйцэтгэдэг. Гэсэн хэдийн ч догол мөрийг гарчиг, гарчгийг догол мөр шиг харагдуулан ашиглаж болохгүй.
<h1>-<h6> элементэд гарчгийг <p>-д үндсэн текстийг харуулахад ашиглаж байхын анхаарна уу.
Үсгийн хэмжээ /Font Size Pixels/
Pixel-р текстийн хэмжээг зааж өгч бүрэн хянаж болно.
Жишээ нь
<style>
h1 {
font-size: 45px;
}
h2 {
font-size: 35px;
}
p {
font-size: 16px;
}
</style>
Үсгийн хэмжээ /Font Size EM/
Маш олон хөгжүүлэгчид текстийн хэмжээг pixel-н оронд em-г ашигладаг байна.
1em = 16px байдаг тул бид pixel-г em-рүү тооцоолон шилжүүлж ашиглаж болно.
Жишээ нь
<style>
h1 {
font-size: 2.8125em; /* 45px / 16 = 2.8125em */
}
h2 {
font-size: 1.875em; /* 35px / 16 = 2.1875em */
}
p {
font-size: 1em; /* 16px / 16 = 1em */
}
</style>
Тэмдэглэл: em-г зарим интернет хөтчид алдагддаг тул процентыг давхар ашиглаж байгаарай.
Em болон Процентын хослол
Бүх интернет хөтөч дээр ажилладаг шийдэл бол процент юм. Иймд текстийн хэмжээний анхны утгыг <body> элементэд процентоор зааж өгч байна.
Жишээ нь
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.8125em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.825em;
}
</style>
Font Weight
font-weight шинж чанарт үсгийн фонтын өргөнийг зааж өгнө.
Жишээ нь
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
Responsive Font Size
Текстийн хэмжээг vw-р тохируулж болно, энэ нь "viewport width" буюу харах талбайн өргөн гэсэн үг юм, Ингэсэнээр текстийн хэмжээ нь интернет хөтчийн цонхны хэмжээг том болгоход нь том болж жижиг болгоход нь жижиг болон дагаж мөрдөх болно.
Сэтгэгдэлүүд
