Изборът на шрифта е важен
Изборът на правилния шрифт оказва огромно влияние върху начина, по който читателите изпитват уебсайт.
Правилният шрифт може да създаде силна идентичност за вашата марка.
Използването на шрифт, който е лесен за четене, е важно. Шрифтът добавя стойност към вашия текст. Също така е важно да изберете правилния цвят и размер на текста за шрифта.
1. Общи семейства шрифтове
В CSS има пет родови семейства шрифтове:
- Серифните шрифтове имат малък щрих по краищата на всяка буква. Те създават усещане за официалност и елегантност.
- Безсерифните шрифтове имат изчистени линии (не са прикрепени малки щрихи). Те създават модерен и минималистичен външен вид.
- Монопространствени шрифтове - тук всички букви имат еднаква фиксирана ширина. Те създават механичен вид.
- Курсивите шрифтове имитират човешки почерк.
- Фантастичните шрифтове са декоративни / закачливи шрифтове.
Всички различни имена на шрифтове принадлежат към едно от родовите семейства шрифтове.
Разлика между шрифтовете Serif и Sans-serif
Забележка: На компютърните екрани шрифтовете без засечки се считат за по-лесни за четене от шрифтовете със засечки.
Някои примери за шрифтове
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Свойството на семейството на шрифтовете на CSS
В CSS използваме font-familyсвойството, за да посочим шрифта на текст.
В font-familyимота трябва да съдържа няколко имената на шрифтовете като система "резервен вариант", за да се осигури максимална съвместимост между браузърите / операционни системи. Започнете с желания шрифт и завършете с родово семейство (за да позволите на браузъра да избере подобен шрифт в родовото семейство, ако няма други шрифтове). Имената на шрифтовете трябва да бъдат разделени със запетая.
Забележка : Ако името на шрифта е повече от една дума, то трябва да е в кавички, като: "Times New Roman".
Пример
Посочете няколко различни шрифта за три абзаца:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}Какво представляват шрифтовете, безопасни за уеб?
Уеб безопасни шрифтове са шрифтове, които са универсално инсталирани във всички браузъри и устройства.
Резервни шрифтове
Няма обаче 100% напълно безопасни в мрежата шрифтове. Винаги има шанс шрифтът да не бъде намерен или да не е инсталиран правилно.
Ето защо е много важно винаги да използвате резервни шрифтове.
Това означава, че трябва да добавите списък с подобни "резервни шрифтове" в font-family свойството. Ако първият шрифт не работи, браузърът ще опита следващия, следващия и т.н. Винаги завършвайте списъка с родово име на шрифта.
Пример
Тук има три типа шрифтове: Tahoma, Verdana и sans-serif. Вторият и третият шрифт са резервни копия, в случай че първият не бъде намерен.
p {
font-family: Tahoma, Verdana, sans-serif;
}2. Най-добрите уеб безопасни шрифтове за HTML и CSS
Следният списък са най-добрите шрифтове за уеб безопасност за HTML и CSS:
- Arial (без засечки)
- Вердана (без засечки)
- Helvetica (без засечки)
- Тахома (без засечки)
- Trebuchet MS (без засечки)
- Times New Roman (сериф)
- Джорджия (сериф)
- Гарамонд (сериф)
- Courier New (monospace)
- Brush Script MT (курсив)
Забележка: Преди да публикувате уебсайта си, винаги проверявайте как се показват вашите шрифтове в различни браузъри и устройства и винаги използвайте резервни шрифтове!
Arial (без засечки)
Arial е най-широко използваният шрифт както за онлайн, така и за печатни медии. Arial е и шрифтът по подразбиране в Google Docs.
Arial е един от най-безопасните уеб шрифтове и е достъпен във всички основни операционни системи.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Вердана (без засечки)
Verdana е много популярен шрифт. Verdana е лесно четима дори при малки размери на шрифта.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Helvetica (без засечки)
Шрифтът Helvetica е обичан от дизайнерите. Подходящ е за много видове бизнес.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Тахома (без засечки)
Шрифтът Tahoma има по-малко пространство между символите.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Trebuchet MS (без засечки)
Trebuchet MS е проектиран от Microsoft през 1996 г. Използвайте внимателно този шрифт. Не се поддържа от всички мобилни операционни системи.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Times New Roman (сериф)
Times New Roman е един от най-разпознаваемите шрифтове в света. Изглежда професионално и се използва в много вестници и уебсайтове за новини. Той е и основният шрифт за устройства и приложения на Windows.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Джорджия (сериф)
Джорджия е елегантен шрифт със засечки. Той е много четим при различни размери на шрифта, така че е добър кандидат за мобилен дизайн.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Гарамонд (сериф)
Garamond е класически шрифт, използван за много печатни книги. Има вечен външен вид и добра четливост.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Courier New (monospace)
Courier New е най-широко използваният monospace serif шрифт. Courier New често се използва с кодиращи дисплеи и много доставчици на електронна поща го използват като шрифт по подразбиране. Courier New е и стандартният шрифт за филмови сценарии.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Brush Script MT (курсив)
Шрифтът Brush Script MT е проектиран да имитира почерк. Той е елегантен и изтънчен, но може да бъде труден за четене. Използвайте го внимателно.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
3. Стил на шрифта
В font-styleимота се използва най-вече да се уточни курсив.
Това свойство има три стойности:
- нормално - Текстът се показва нормално
- курсив - Текстът е показан в курсив
- наклонен - Текстът е „наклонен“ (наклонен е много подобен на курсив, но по-малко поддържан)
Пример
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}Тегло на шрифта
В font-weightимота определя теглото на шрифта:
Пример
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}Вариант на шрифта
На font-variantуточнява, собственост или не на текста трябва да бъдат показани в малка капитализация шрифт.
С шрифт с малки главни букви всички малки букви се преобразуват в главни букви. Преобразуваните главни букви обаче се появяват с по-малък размер на шрифта от оригиналните главни букви в текста.
Пример
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}5. Размер на шрифта
В font-sizeимота определя размера на текста.
Умението да управлявате размера на текста е важно при уеб дизайна. Не трябва обаче да използвате корекции на размера на шрифта, за да направите абзаците да изглеждат като заглавия или заглавия да изглеждат като абзаци.
Винаги използвайте правилните HTML тагове, като <h1> - <h6> за заглавия и <p> за абзаци.
Стойността на размера на шрифта може да бъде абсолютен или относителен размер.
Абсолютен размер:
- Задава текста до определен размер
- Не позволява на потребителя да променя размера на текста във всички браузъри (лошо поради съображения за достъпност)
- Абсолютният размер е полезен, когато е известен физическият размер на изхода
Относителен размер:
- Задава размера спрямо околните елементи
- Позволява на потребителя да променя размера на текста в браузърите
Забележка: Ако не посочите размер на шрифта, размерът по подразбиране за нормален текст, като абзаци, е 16px (16px = 1em).
Задайте размер на шрифта с пиксели
Задаването на размера на текста с пиксели ви дава пълен контрол върху размера на текста:
Пример
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}Съвет: Ако използвате пиксели, все още можете да използвате инструмента за мащабиране, за да преоразмерите цялата страница.
Задайте размера на шрифта с Em
За да позволят на потребителите да преоразмеряват текста (в менюто на браузъра), много разработчици използват em вместо пиксели.
1em е равен на текущия размер на шрифта. Размерът на текста по подразбиране в браузърите е 16px. И така, размерът по подразбиране на 1em е 16px.
Размерът може да се изчисли от пиксели до em, като се използва тази формула: pixels / 16 = em
Пример
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}В горния пример размерът на текста в em е същият като предишния пример в пиксели. Въпреки това, с размера на em, е възможно да коригирате размера на текста във всички браузъри.
За съжаление все още има проблем с по-старите версии на Internet Explorer. Текстът става по-голям, отколкото трябва, когато се увеличи, и по-малък, отколкото трябва, когато се намали.
Използвайте комбинация от проценти и Em
Решението, което работи във всички браузъри, е да зададете размер на шрифта по подразбиране в проценти за елемента <body>:
Пример
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}Нашият код вече работи чудесно! Той показва еднакъв размер на текста във всички браузъри и позволява на всички браузъри да увеличават или преоразмеряват текста!
Отзивчив размер на шрифта
Размерът на текста може да се зададе с vwединица, което означава „ширина на прозореца за показване“.
По този начин размерът на текста ще следва размера на прозореца на браузъра:
Здравей свят
Преоразмерете прозореца на браузъра, за да видите как се мащабира размерът на шрифта.
Пример
<h1 style="font-size:10vw">Hello World</h1>Viewport е размерът на прозореца на браузъра. 1vw = 1% от ширината на прозореца за гледане. Ако прозорецът за гледане е широк 50 cm, 1vw е 0,5 cm.
6. Свойството на шрифта на CSS
За да съкратите кода, също е възможно да зададете всички отделни свойства на шрифта в едно свойство.
В fontимота е краткият обект за:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Забележка: Стойностите font-sizeи font-family са задължителни. Ако една от останалите стойности липсва, се използват стойностите им по подразбиране.
Пример
Използвайте fontза задаване на няколко свойства на шрифта в една декларация:
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}Изпробвайте се с упражнения!
Всички свойства на CSS шрифта
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
