Parcel Demo

Shriftlar va matn

Endi CSS asoslarini bilib oldik, keling, misolimiz yaxshi ko'rinishi uchun style.css faylimizga yana bir qancha qoidalar va ma'lumotlarni qo'shib qo'ying.

Endi CSS asoslarini o'rganib chiqdik, keling, misolimiz yaxshi ko'rinishi uchun style.css faylimizga yana bir qancha qoidalar va ma'lumotlar qo'shaylik. Avvalo shriftlarimiz va matnlarimizni biroz yaxshiroq ko'rinishga keltiramiz.
Avvalo, orqaga qayting va biron bir joyda saqlagan Google Fonts natijalarini toping. Index.html sarlavhasi ichiga biron bir joyga elementini qo'shing (yana va teglari orasidagi har qanday joyda). Bu shunday ko'rinadi:

Ushbu kod sizning sahifangizni Open Sans shriftlar oilasini sahifangiz bilan birga yuklaydigan uslublar jadvaliga bog'laydi va ularni o'zingizning jadvalingiz yordamida HTML elementlaringizga qo'llashga imkon beradi.

Keyin style.css faylingizdagi mavjud qoidani olib tashlang. Bu yaxshi sinov bo'ldi, lekin qizil matn aslida unchalik yaxshi ko'rinmaydi.

Joylashtiruvchi qatorni haqiqiy shrift oilasi bilan Google Fonts-dan olgan qator bilan almashtirib, kerakli joyga quyidagi qatorlarni qo'shing. (shrift-oilasi shunchaki matn uchun qaysi shrift (lar) dan foydalanmoqchi ekanligingizni anglatadi). Ushbu qoida butun shrift uchun shrift va shriftning global hajmini belgilaydi (chunki butun sahifaning ota-onasi hisoblanadi va uning tarkibidagi barcha elementlar bir xil shrift o'lchamlari va shriftlar oilasini egallaydi):

HTML {

shrift hajmi: 10px; / * px "piksel" degan ma'noni anglatadi: asosiy shrift 10 piksel balandlikda bo'ladi * /

font-family: placeholder: bu Google shriftlaridan shrift nomi bo'lishi kerak

}

Eslatma: CSS hujjatidagi / * va * / orasidagi hamma narsa bu CSS izohidir, bu kodni bajarishda brauzer e'tiborga olmaydi. Bu erda siz nima qilayotganingiz haqida foydali yozuvlar yozishingiz mumkin.

Endi HTML korpusi tarkibidagi matnni o'z ichiga olgan elementlar uchun shrift o'lchamini o'rnatamiz (