Само о компликованом или научите ЦСС3. Део 4. 1. Фонтови у ХТМЛ документу. Породица фонтова и @ фонт-фаце својства

Поштовани, драги читаоци сајта ремонтцомпа.ру! Моје име је Роман Нахват и представљам вам четврти део низа чланака о језику ЦСС стила. У овом делу ћемо истражити разне ЦСС особине за форматирање текста у ХТМЛ документу. Пошто је форматирање текста у ЦСС-у прилично опсежна тема, четврти део ће бити подељен на неколико делова. Никоме није тајна да дизајн веб локације увелико зависи од врсте текстуалне компоненте на њему. ЦСС има много својстава за форматирање текста у ХТМЛ документу. Ова својства вам омогућавају да доделите фонту, боји, величини, размаку реда и другим карактеристикама тексту. На пример, својства породице ЦСС фонтова и @ фонт-фаце својства које ћемо данас гледати дизајнирани су за рад са фонтовима на веб страници.

Само о компликованом или научите ЦСС3. Део 4. 1. Фонтови у ХТМЛ документу. Породица фонтова и @ фонт-фаце својства

Сваки фонт је индивидуалан на свој начин и разликује се од другог фонта у свом стилу. Али упркос томе, фонтови имају заједничке и заједничке карактеристике. Овај или онај фонт може припадати одређеној породици. На пример, фонт Тимес Нев Роман припада породици сериф (сериф фонтови), а фонт Ариал припада породици санс-сериф (санс-сериф фонтови). Постоји и породица из једноосновног простора (фонтови који припадају овој породици имају знакове исте фиксне ширине), а курзивни фонтови имитирају рукопис написан руком. Табела испод приказује породице фонтова и неке представнике ових породица

ЦСС својство породице фонтова користи се за одређивање фонта за текст који ће се користити унутар елемента у ХТМЛ документу. Фонт се може одредити на два начина: писањем имена фонта као вредности за својство породице фонтова (на пример, фонт породице: ариал) писањем имена породице фонтова као вредности својства породице фонтова (на пример, породице фонтова: сериф) Када одређујете фонт користећи својство породице фонтова, требало би узети у обзир чињеницу да сам веб прегледач нема уграђене фонтове. За приказивање текста на веб страници користе се фонтови инсталирани у оперативном систему на рачунару корисника. Својство породице ЦСС фонтова омогућава вам да одредите не један фонт, већ неколико фонтова као вредности, одвајајући њихова имена зарезима. Уобичајена пракса је да се на крају листе фонтова наводи име породице. То се ради у случају да фонтови наведени као вриједност за својство породице фонтова нису доступни у оперативном систему корисника. Ако одредите неколико фонтова као вредност за својство породице фонтова, веб претраживач, након што наиђе на први наведени фонт, проверава да ли је инсталиран на рачунару корисника. Ако овај фонт постоји, веб претраживач га користи као фонт за елемент на веб страници. Ако фонт није прво постављен као вредност за својство породице фонтова, није подешен други фонт, итд. Ако није пронађен ниједан од наведених фонтова, веб прегледач одабире одговарајући фонт из наведене породице фонтова. Направите ХТМЛ документ са следећом структуром и сачувајте га на флеш диск-у у ЦСС фасцикли испод фонта имена и проширења .хтмл

У ХТМЛ документу фонт.хтмл са ознакама

и

створите два параграфа са неким текстом

Добијамо следећу врсту веб странице фонт.хтмл

Такође у ЦСС фасциклу на флеш диску сачувајте датотеку стилова фонтс.цсс

Првим и другим ставком доделите идентификаторе фонт1 и фонт2

Помоћу селектора идентификатора у табели стилова фонтс.цсс доделите фонтовима Георгиа, Тимес Нев Роман, Тимес тексту првог одломка тако што ћете написати ред # фонт1 фонт-фамили: Георгиа, 'Тимес Нев Роман', Тимес, сериф. Можете обратити пажњу да је након имена фонтова наведено њихово заједничко име (сериф)

Добијамо следеће

Када додељујете фонт елементу у ХТМЛ документу, такође морате узети у обзир формат самог фонта, јер различити веб прегледачи подржавају различите формате фонта. Да бисте приказали исти фонт у различитим веб прегледачима, морате их навести у различитим форматима

Уграђени фонтови отвореног типа (са .еот екстензијом) подржани су само у програму Интернет Екплорер.

ТруеТипе (.ттф) и ОпенТипе (.отф) фонтови подржавају сви савремени веб прегледачи. Што се тиче подршке за ТруеТипе и ОпенТипе фонтове од стране Интернет Екплорера, од верзије 6 до верзије 8 ТруеТипе и ОпенТипе фонтове овај прегледник не подржава, а верзије 9, 10 и 11 Интернет Екплорера делимично подржавају ТруеТипе и ОпенТипе фонтове

Веб Опен Фонт (.вофф) фонтови су компримирана верзија ТруеТипе или ОпенТипе фонтова и подржавају их сви модерни веб прегледачи, као и Интернет Екплорер, почевши од верзије 9

Фонтови са екстензијом .вофф2 су најновија верзија формата Веб Опен Фонт и подржани су од стране свих модерних веб прегледача, међутим, ниједна верзија веб прегледача Интернет Екплорер не подржава фонтове са овим проширењем

Сцалабле Вецтор Грапхиц (.свг) фонтове као и ТруеТипе, ОпенТипе и Веб Опен Фонт подржани су модерним веб прегледачима, укључујући и на мобилним уређајима

Поставимо неки фонт за текст другог одељка на веб-локацији фонт.хтмл, пружајући га веб претраживачу у различитим форматима. Веб локација Гоогле фонтова на хттпс://фонтс.гоогле.цом има више од 800 бесплатних фонтова који припадају различитим породицама.

На веб локацији Гоогле Фонтови приказујемо серифне фонтове потврдним оквиром.

На пример, за текст другог става веб странице фонт.хтмл поставите фонт под називом ИМ Фелл ДВ Пица СЦ. Кликните на знак плус да бисте одабрали овај фонт.

Затим кликните на дугме за преузимање

Сачувајте архиву помоћу датотеке фонта ИМ Фелл ДВ Пица СЦ на флеш диску у ЦСС фасцикли

Након отпакирања преузете архиве, у фасцикли ИМ_Фелл_ДВ_Пица_СЦ видимо датотеку фонтова ИМФеПИсц28П

Преузета датотека фонта има екстензију .ттф, то јест, фонт је ТруеТипе формата. Као што смо видели горе, Интернет Екплорер не подржава фонтове са .ттф екстензијом. Будући да желимо да се овај фонт прикаже у било ком веб претраживачу, морамо га претворити у друге формате, укључујући уграђени формат отвореног типа, који подржава веб претраживач Интернет Екплорер верзије 6-11.

Да бисте претворили преузету датотеку фонтова ИМФеПИсц28П.ттф у друге формате, идите на хттпс://ввв.фонтскуиррел.цом/тоолс/вебфонт-генератор и кликните на дугме Уплоад Фонтс

Изаберите преузету датотеку фонта ИМФеПИсц28П.ттф и кликните Отвори

Укључите Да, фонтови које преносим су легално подобни за уграђивање на мрежи и такође подесите прелаз на Екперт

Ставите квачице испред формата у које желимо да претворимо датотеку фонтова ИМФеПИсц28П.ттф

Кликните на Довнлоад Иоур Кит

Сачувајте архиву с фонтом ИМ_Фелл_ДВ_Пица_СЦ конвертираним у различите формате на фласх диску у ЦСС мапи

Улазимо у мапу вебфонткит-20190307-050537 и видимо фајлове фонтова ИМ_Фелл_ДВ_Пица_СЦ са екстензијама .еот, .свг, .ттф, .вофф, .вофф2 у њој. Такође нас занима датотека стила са екстензијом .цсс, која приказује код за својство ЦСС @ фонт-фаце, а који ћемо користити да повежемо фонт ИМ_Фелл_ДВ_Пица_СЦ у разним форматима на фонт.хтмл веб страницу

ЦСС својство @ фонт-фаце омогућава вам употребу различитих фонтова, чак и ако нису инсталирани на рачунару корисника. Размотрите цсс код у датотеци стилесхеет.цсс детаљније. Унутар својства @ фонт-фаце се налази још једно својство породице ЦСС фонтова које даје фонту име. Назив фонта користиће се у будућности за означавање фонта текста (у нашем случају за текст другог одељка на страници фонт.хтмл). Својство срц каже веб претраживачу пут до датотека са фонтом

Копирамо ЦСС код из датотеке стилесхеет.цсс и затим га залепимо у датотеку стилова фонтс.цсс, која је повезана на веб-локацији фонт.хтмл. Добијамо следеће

Будући да смо на страници фонт.хтмл другом имену додијелили идентификатор са именом фонт2, стога ћемо у датотеци стилова фонтс.цсс помоћу селектора идентификатора текст у другом пасусу додијелити фонту с именом које је одређено као вриједност за својство породице фонтова, наиме им_фелл_дв_пица_сцрегулар

У датотеку стилова фонтс.цсс упишите линију # фонт2 фонт-фамили: 'им_фелл_дв_пица_сцрегулар'

Да би се текст другог става приказао фонтом названим им_фелл_дв_пица_сцрегулар, копирајте датотеке овог фонта у различите формате из мапе вебфонткит-20190307-050537 у ЦСС мапу

Добијамо следеће

Ако отворите страницу фонт.хтмл у веб претраживачу, можете видети да је текст другог одељка приказан у фонту ИМ Фелл ДВ Пица СЦ