Само за сложно или научете CSS3. Част 4. 1. Шрифтове в HTML документ. Свойства на шрифтовете и @ шрифтово лице

Здравейте, скъпи читатели на сайта remontcompa.ru! Казвам се Роман Нахват и ви представям четвъртата част от поредица статии на езика на CSS стил. В тази част ще изследваме различни свойства на CSS за форматиране на текст в HTML документ. Тъй като форматирането на текст в CSS е доста обширна тема, четвъртата част ще бъде разделена на няколко подчасти. За никого не е тайна, че дизайнът на сайт до голяма степен зависи от типа на текстовия компонент върху него. CSS има много свойства за форматиране на текст в HTML документ. Тези свойства ви позволяват да присвоите шрифтове, цвят, размер, разстояние между редовете и други характеристики на текста. Например свойствата на семейството шрифтове CSS и @ font-face свойства, които ще разгледаме днес, са създадени да работят с шрифтове на уеб страница..

Само за сложно или научете CSS3. Част 4. 1. Шрифтове в HTML документ. Свойства на шрифтовете и @ шрифтово лице

Всеки шрифт е индивидуален по свой начин и се различава от друг шрифт по своя стил. Но въпреки това шрифтовете имат общи и общи черти. Този или онзи шрифт може да принадлежи на определено семейство. Например шрифтът Times New Roman принадлежи към семейството serif (шрифтове за serif), а шрифтът Arial принадлежи към семейството sans-serif (шрифтове sans-serif). Съществува също еднофамилно семейство (шрифтовете, принадлежащи към това семейство, имат знаци със същата фиксирана ширина), а курсивните шрифтове имитират ръкописен почерк. Таблицата по-долу показва семействата на шрифтовете и някои представители на тези семейства

Свойството семейство на шрифтове CSS се използва за определяне на шрифта за текста, който ще се използва вътре в елемента в HTML документа. Шрифтът може да бъде определен по два начина: Чрез писане на името на шрифта като стойност за свойството на семейството на шрифтове (например, font-family: arial) Чрез писане на името на семейството на шрифта като стойност на свойството на семейството на шрифтовете (например, font-family: serif) Когато посочвате шрифт, използвайки свойството на семейството на шрифтове, трябва да имате предвид факта, че самият уеб браузър няма никакви вградени шрифтове. За показване на текст на уеб страница се използват шрифтове, инсталирани в операционната система на компютъра на потребителя. Свойството на семейството на шрифтове CSS ви позволява да посочите не един шрифт, а няколко шрифта като стойност, разделяйки имената им със запетаи. Често срещана практика е да се посочва името на фамилията в края на списъка с шрифтове. Това се прави в случай, че шрифтовете, посочени като стойност за свойството семейство на шрифтове, не са налични в операционната система на потребителя. Ако посочите няколко шрифта като стойност за свойството семейство на шрифтове, уеб браузърът, след като срещне първия посочен шрифт, проверява дали е инсталиран на компютъра на потребителя. Ако този шрифт съществува, уеб браузърът го използва като шрифт за елемента на уеб страницата. Ако шрифтът, зададен първо като стойност за свойството семейство на шрифтове, не е зададен, тогава вторият шрифт се проверява и т.н. Ако не се намери нито един от посочените шрифтове, уеб браузърът избира подходящия шрифт от посоченото семейство шрифтове. Създайте HTML документ със следната структура и го запишете на флаш устройство в папката CSS под шрифта на името и разширението .html

В HTML документ font.html с тагове

и

създайте два абзаца с някакъв текст

Получаваме следния вид уеб страница font.html

Също така в папката CSS на флаш устройството, запазете файла със стилове fonts.css

Присвойте идентификаторите font1 и font2 съответно на първия и втория параграф

Използвайки селектора за идентифициране, в таблицата със стилове fonts.css присвойте шрифтовете Georgia, Times New Roman, Times към текста на първия параграф, като напишете ред # font1 font-family: Georgia, 'Times New Roman', Times, serif. Можете да обърнете внимание, че след имената на шрифтовете е посочено тяхното общо име (serif)

Получаваме следното

Когато присвоявате шрифт на елемент в HTML документ, трябва да вземете предвид и формата на самия шрифт, тъй като различните уеб браузъри поддържат различни формати на шрифта. За да се показва един и същ шрифт в различни уеб браузъри, трябва да ги предоставите в различни формати

Вградените шрифтове с отворен тип (с разширение .eot) се поддържат само в Internet Explorer.

TrueType (.ttf) и OpenType (.otf) шрифтове се поддържат от всички съвременни уеб браузъри. По отношение на поддръжката на шрифтове TrueType и OpenType от Internet Explorer, от версия 6 до версия 8 Шрифтовете TrueType и OpenType не се поддържат от този браузър, а версии 9, 10 и 11 на Internet Explorer поддържат само частично шрифтове TrueType и OpenType.

Шрифтовете на Web Open Font (.woff) са компресирана версия на шрифтове TrueType или OpenType и се поддържат от всички съвременни уеб браузъри, както и от Internet Explorer, като се започне от версия 9

Шрифтовете с разширението .woff2 са най-новата версия на формата на Web Open Font и се поддържат от всички съвременни уеб браузъри, но никоя версия на уеб браузъра Internet Explorer не поддържа шрифтове с това разширение

Мащабируеми шрифтове Vector Graphic (.svg), както и TrueType, OpenType и Web Open Font се поддържат от съвременни уеб браузъри, включително на мобилни устройства

Нека зададем някакъв шрифт за текста на втория параграф на уеб страницата font.html, като го предоставим на уеб браузъра в различни формати. Уебсайтът на Google Fonts на адрес https://fonts.google.com има повече от 800 безплатни шрифта, принадлежащи на различни семейства.

Ние показваме серифни шрифтове на уебсайта на Google Fonts, като поставим отметка в съответното поле.

Например, за текста на втория параграф на уеб страницата font.html задайте шрифт, наречен IM Fell DW Pica SC. Кликнете върху знака плюс, за да изберете този шрифт.

След това щракнете върху бутона за изтегляне

Запишете архива с файла на шрифта IM Fell DW Pica SC на флаш устройството в папката CSS

След като разопаковате изтегления архив, в папката IM_Fell_DW_Pica_SC виждаме файла с шрифта IMFePIsc28P

Изтегленият шрифтен файл има разширението .ttf, тоест това е шрифт от формата TrueType. Както видяхме по-горе, шрифтовете с разширение .ttf не се поддържат от Internet Explorer. Тъй като искаме този шрифт да се показва във всеки уеб браузър, трябва да го преобразуваме в други формати, включително формат Embedded Open Type, който се поддържа от уеб браузър Internet Explorer версия 6-11

За да конвертирате изтегления файл на шрифта IMFePIsc28P.ttf в други формати, отидете на https://www.fontsquirrel.com/tools/webfont-generator и кликнете върху бутона Качване на шрифтове

Изберете изтегления файл на шрифта IMFePIsc28P.ttf и щракнете върху Отваряне

Поставете отметка Да, шрифтовете, които качвам, са законно допустими за вграждане в мрежата и също така поставете превключвателя на Expert

Поставете отметки пред форматите, в които искаме да конвертирате файла с шрифтове на IMFePIsc28P.ttf

Щракнете върху Изтеглете вашия комплект

Запазете архива с шрифта IM_Fell_DW_Pica_SC, преобразуван в различни формати на флаш устройство в папката CSS

Влизаме в папката webfontkit-20190307-050537 и виждаме файловете с шрифтове IM_Fell_DW_Pica_SC с разширенията .eot, .svg, .ttf, .woff, .woff2 в нея. Също така се интересуваме от файла със стилове с разширението .css, който показва кода за свойството CSS @ font-face, който ще използваме за свързване на IM_Fell_DW_Pica_SC шрифт в различни формати към уеб страницата на font.html

CSS свойството @ font-face ви позволява да използвате различни шрифтове, дори ако те не са инсталирани на компютъра на потребителя. Помислете по-подробно css кода във файла stylesheet.css. Вътре в свойството @ font-face е друга собственост на семейството на шрифтове CSS, която дава име на шрифта. Името на шрифта ще бъде използвано в бъдеще, за да посочи шрифта към текста (в нашия случай за текста на втория параграф на страницата font.html). Свойството src казва на уеб браузъра пътя към файловете с шрифтове

Копирайте CSS кода от файла stylesheet.css и след това го поставете във файла със стилове fonts.css, който е свързан в уеб страницата на font.html. Получаваме следното

Тъй като на страницата font.html сме присвоили идентификатор на втория параграф с името font2, следователно в файла със стилове fonts.css, използвайки селектора на идентификатора, ще присвоим текста във втория параграф на шрифта с името, което е посочено като стойност за свойството на семейството на шрифта, а именно im_fell_dw_pica_scregular

Във файла със стилове fonts.css напишете реда # font2 font-family: 'im_fell_dw_pica_scregular'

За да се покаже текстът на втория параграф с шрифт с име im_fell_dw_pica_scregular, копирайте файловете на този шрифт в различни формати от папката webfontkit-20190307-050537 в папката CSS

Получаваме следното

Ако отворите страницата font.html в уеб браузър, можете да видите, че текстът на втория параграф е показан в шрифта IM Fell DW Pica SC