У веб развоју, исправна употреба стила фонтова даје атрактиван изглед апликацији. Ови стилови фонта дају визуелне назнаке о редоследу читања документа. На пример, стил фонта заглавља документа мора бити подебљан и значајан од других. Стил такође помаже да се важан садржај разликује од других.
Исходи учења овог чланка су:
- Шта су Гоогле веб фонтови?
- Како увести Гоогле фонтове у ХТМЛ?
- Како користити Гоогле фонтове у ЦСС датотеци?
Шта су Гоогле веб фонтови?
Гоогле веб фонт је библиотека отвореног кода која садржи стотине стилова или породица фонтова. Такође пружа АПИ-је који нам помажу да користимо веб фонтове са Андроидом и ЦСС-ом. Гоогле фонтови су много лакши од других библиотека фонтова и доступни су бесплатно за пословну употребу. Ово је лакше применити на било којој веб локацији.
ЦСС подразумевано нуди фантаси, сериф, санс сериф, цурсиве и моноспаце фонтове. Гоогле фонтови се могу користити ако желите да користите неке друге стилове фонта.
Како увести Гоогле фонтове у ХТМЛ?
Да бисте користили Гоогле фонтове на ХТМЛ страници, прођите кроз следеће кораке.
Корак 1: Изаберите породицу фонтова
Прво отворите Гоогле Фонтови званичну веб страницу и изаберите фонт који вам се свиђа. На пример, изабрали смо „ Јастог два ' породица фонтова:
Корак 2: Изаберите стилове
Затим, померите се надоле да бисте видели листу стилова. Додајте их у своју колекцију кликом на „ + ” знак:
Корак 3: Прегледајте изабране породице
Да бисте видели изабране породице, кликните на икону означену испод:
Корак 4: Копирајте везу за уградњу у ХТМЛ
Након тога, померите се надоле и копирајте везу породице фонтова користећи означено „ Копирај ” икона:
Како користити Гоогле фонтове у ЦСС датотеци?
Да бисте користили копију Гоогле фонтова у ЦСС-у за стилизовање, прођите кроз дате примере.
Пример 1
Укључите „ <п> ” елемент за навођење неког садржаја или пасуса:
< стр > „Најбољи веб-сајт са упутством“ стр >Да бисте увезли Гоогле фонтове, налепите копирани код у „ <стиле> ” ознака ХТМЛ датотеке:
@ импорт урл ( '4092Ф3Ф4Е2ЦД3Ц8563093ЦФФЕ9Б33Д727АД2А7Е7' ) ;Елемент стила „п“.
стр {породица фонтова: 'Јастог два' , цурсиве;
тект-алигн: центар;
фонт-сизе: 45пк;
боја: ргба ( 64 , 3 , 162 , 0.8 ) ;
}
Следећа објашњена ЦСС својства се примењују на ХТМЛ “ <п> ” ознака:
- “ породица фонтова ” је додељена вредност “ „Јастог два“, курзив ”. Ова породица фонтова је увезена из Гоогле фонтова.
- “ Поравнање текста ” прилагођава поравнање текста.
- “ фонт-сизе ” одређује величину фонта.
- “ боја ” поставља боју фонта.
Слика показује да је породица фонтова успешно примењена:
Пример 2
Узмимо још један пример за увоз „ Нерко Оне ” Гоогле фонт. У ту сврху, поново налепите код за „Нерко Оне“ УРЛ Гоогле фонта у „ <стиле> ” елемент:
@ импорт урл ( '17А87А0Ц575Ц155709Ф42ЕФ5501256БЕФ69Ц1009' ) ;Елемент стила „п“.
стр {породица фонтова: 'Нерко Оне' , цурсиве;
фонт-веигхт: 300 ;
фонт-сизе: 30пк;
}
„ породица фонтова ”, “ фонт-веигхт ', и ' фонт-сизе “ својства се примењују на ХТМЛ “ <п> ” елемент.
Излаз
Научили смо вас како да увезете Гоогле веб фонтове у ЦСС датотеку.
Закључак
Да бисте увезли Гоогле фонтове у ЦСС, прво посетите Гоогле Фонтови званичну веб страницу и изаберите стил фонта. Затим копирајте код који садржи „ @увоз ” кључну реч и налепите је у ЦСС датотеку или у „ <стиле> ” елемент ХТМЛ датотеке. Ова студија је показала комплетну процедуру увоза Гоогле фонтова у ЦСС датотеку.