Како најбоље искористити фонтове у ЦСС-у?

Овај чланак ће вас упознати са једноставном, али важном темом која је Фонтс Ин а такође ће вам пружити практичну демонстрацију на ту тему. Следећи смерници ће бити обрађени у овом чланку,

• Фонтови у ЦСС-у
• Атрибути у ЦСС фонту
• атрибут стила фонта
• атрибут фонт-веигхт
• атрибут величине фонта
• атрибут породице фонтова

Веб локације преносе садржај у облику слика, аудио, видео и текстуалног садржаја. Међутим, већина веб страница се и даље ослања на текст као превладавајући формат. То је зато што обичан текст нуди неке врло значајне предности.

Ненаметљива читљивост - желите да проверите најновији резултат меча док сте у канцеларији. Очигледно је да желите брзо ажурирање текста, а не бучни видео!
Ниска потреба за пропусношћу мреже - Текстуални садржај се може учитати чак иу лошим областима интернет конекције, док богати медији то не могу.
Прилагођено претраживању - Веб локације увек прате колико лако њихов садржај буде примећен на претраживачима. Текст је најприкладнији за ово, бар док АИ потпуно не преузме интернет!

Док форматирају текстуални садржај, веб дизајнери имају само неколико параметара на којима могу радити - фонт, поравнање, истицање и боју. Избор правог фонта за текст је пресудан избор. Стандардна пракса је да се помоћу ЦСС ознака фонтова дефинишу фонтови за текст на ХТМЛ страницама.
Ако сте нови у свету ХТМЛ програмирања, потражите основну почетну турнеју овде. Можда ћете желети да прочитате основе ЦСС-а пре него што наставите са учењем ЦСС фонтова.

За свеобухватну ЦСС лекцију посетите Едурека ЦСС лекцију за почетнике. Добићете одличне информације о начину на који ће се ЦСС користити за проширивање ХТМЛ веб дизајна.

Настављамо са овим чланком о Фонтовима у ЦСС-у

Фонтови у ЦСС-у

Фонт је у основи скуп карактеристика повезаних са приказом текста. Фонтови се међусобно разликују по величини, удубљењу, ширини, нагибу и тако даље. Почнимо са основним приказом текста у различитим фонтовима.

Пример 1: Наслови и пасуси у различитим фонтовима

тело {бацкгроунд-цолор: лигхтблуе} х1 {фонт: болд 30пк ариал, санс-сериф} х2 {фонт: 15пк вердана} п {фонт: италиц болд 12пк / 30пк Георгиа, сериф}
Одломак курзивним подебљаним фонтом Георгиа
 

 Пример 1: Резултат 

У примеру 1 имамо 3 различита реда текста у различитим фонтовима. Приметили бисте да се сваки фонт разликује у ширини карактера, удубљењима итд.

Настављамо са овим чланком о Фонтовима у ЦСС-у

Атрибути у ЦСС фонту

ЦСС фонтови имају 4 примарна атрибута - стил, тежину, величину и породицу. Атрибут стиле означава нормално или курзив. Тежина приказује фонт као обичан или подебљан. Тежина се такође може изразити нумерички. Величина је једноставно величина фонта већа што је већа, што је текст већи по изгледу. Постоји више начина на које се може доделити величина фонта, детаљни описи дати су у следећим одељцима. Атрибут породице је додељивање назива фонта тексту.

У примеру 1 користили смо различита имена фонтова за наслове и пасусе. Испод ознака х1 и п видимо наведена два имена фонтова, док ознака х2 назива само један фонт. Ово је дефиниција породице фонтова, о томе више касније.

Настављамо са овим чланком о Фонтовима у ЦСС-у

атрибут слова фонта:

Два основна стила која се могу поставити су „нормалан“ и „курзив“. Курзив би требало да буде курзивне природе са косим нагибом. Нормал је подразумевана опција која је равна. Постоји још једна мање коришћена опција под називом „коса“, која у већини фонтова подсећа на курзив. Такође можете да подесите стил да „наслеђује“ тако да узима стил фонта из свог надређеног елемента.

Настављамо са овим чланком о Фонтовима у ЦСС-у

атрибут фонт-веигхт:

Овај атрибут одлучује хоће ли фонт изгледати дебео или танак. Може се подесити на „нормално“ или „подебљано“. Подразумевана вредност је нормална. Ова вредност се такође може поставити као нумеричка. Тежина 400 представља нормално, а 700 је подебљано. Постоји неколико других подешавања (у распону од 100 - врло лагано до 900 - врло подебљано), али их не подржавају сви фонтови. Све опције тежине приказане су у примеру 3.

Настављамо са овим чланком о Фонтовима у ЦСС-у

атрибут величине фонта:

Атрибут величине може се поставити на више начина. Наведимо доле ове начине.
● Набројана вредност као што је „средња“, „велика“. Заправо баш као и величине одеће, вредности се могу кретати од КСКС Мале до КСКС Ларге!
● Поставите у односу на његов родитељски елемент, као „већи“ или „мањи“.
● Проценат величине надређеног елемента.
● Поставите као „наследити“ да бисте директно усвојили величину родитељског елемента.
● Као апсолутна вредност у јединицама пк (пиксели), пт (тачке) или цм (центиметар)
„Средњи“ је подразумевана вредност постављена за овај параметар.

Настављамо са овим чланком о Фонтовима у ЦСС-у

атрибут породице фонтова:

У ХТМЛ-у породица ЦСС фонтова служи за подешавање имена фонта. Можете само ставити једно име фонта са ознаком. Или можете доделити више вредности као листу породица фонтова која дефинише приоритет у којем прегледач треба да бира фонт.
Списак је приоритет с лева на десно, у облику резервног система. Изабере се прва вредност ако је доступна или контрола прелази на следећу, све док се не дође до краја листе. Подразумевана породица фонтова дефинисана је подешавањима прегледача.
Породице ЦСС фонтова су 2 типа - генеричке породице и породице фонтова.
● Генеричке породице - на основу неких општих карактеристика, фонтови се групишу као „сериф“, „санс сериф“, „моноспаце“ итд. На пример, Санс сериф означава фонтове без стила серифа.
● Породична имена - фонтови који припадају одређеним породичним хијерархијама. Тимес, Ариал, Цоуриер су све породице фонтова, а Тимес Нев Роман је пример фонтова породице Тимес.
Разне опције употребе породице фонтова наведене су у примеру 4 доле.

како исписати низ у пхп-у

Неке уобичајене тачке које треба напоменути

● Као и неколико других ЦСС својстава, нека подешавања фонта се разликују у различитим прегледачима. Пре коришћења неких ретких подешавања фонта потражите подршку за прегледач.
● Можете засебно да подесите поставке фонта користећи појединачне ознаке стила фонта, тежине фонта итд. Ако желите више компактног кода, можете да користите атрибут стенографског фонта са свим вредностима у истом реду.
● У корисничким сценаријима у којима желите да величина фонта варира у зависности од величине прегледача, постоји корисна поставка величине фонта која се назива респонзивна поставка фонта. Може се подесити помоћу вв јединице, што значи „ширина видног поља“. На тај начин величина текста прати величину прозора прегледача.

Надам се да сте пронашли информације које сте тражили на фонтовима у ЦСС-у. Поделите своје искуство са нама у одељку за коментаре испод. Срећан дизајн!

Ако сте заинтересовани да сазнате више о веб-развоју, погледајте од Едуреке. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).