Подключение шрифтов в CSS

Если не вникать в подробности, по быстрому подключить шрифт можно так:

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

• Нет названия шрифта в свойстве local .
• Подключен только один формат шрифта.
• Неправильно настроены начертания.

Локальные шрифты

Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.

Можно указать несколько названий:

Форматы шрифтов

Сегодня используются четыре формата, рассмотрим их подробнее:

TTF / OTF – работают в большинстве браузеров, кроме IE.

EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.

WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.

WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.

Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:

• WOFF2 для современных браузеров.
• WOFF для браузеров, которые не поддерживают WOFF2.
• TTF для устаревших браузерах
• EOT для поддержки IE.

Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.

Разные начертания шрифтов

Пример подключения шрифта «Crimson Text» в разных начертаниях:

Windows шрифты для css

Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере или мобильном устройстве у посетителей сайта. Каждый владелец устройства может иметь набор разных шрифтов, поэтому на сайтах можно использовать стандартные шрифты, либо загружать нестандартные вместе с сайтом. Браузеры используют ограниченное количество стандартных шрифтов, таких как Arial, Arial Black, Comic Sans MS, Courier New, Helvetica, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings. Загрузка шрифтов вместе с сайтом требует особых приёмов.

Посмотреть, какие наиболее распространённые шрифты установлены на вашем устройстве можно в таблице ниже. Если шрифт не установлен на вашем устройстве, то соответствующий текст в списке будет отображён стандартными системным шрифтом (обычно из того же семейства шрифтов).

1. academy engraved let
2. algerian
3. amaze
4. arial
5. arial black
6. balthazar
7. bankgothic lt bt
8. bart
9. bimini
10. book antiqua
11. bookman old style
12. braggadocio
13. britannic bold
14. brush script mt
15. calibri
16. cambria
17. candara
18. century gothic
19. century schoolbook
20. chasm
21. chicago
22. colonna mt
23. comic sans ms
24. commercialscript bt
25. consolas
26. constantia
27. coolsville
28. corbel
29. courier
30. courier new
31. cursive
32. dayton
33. desdemona
34. estrangelo edessa
35. fantasy
36. flat brush
37. footlight mt light
38. franklin gothic medium
39. futurablack bt
40. futuralight bt
41. gabriola
42. garamond
43. gautami
44. gaze
45. geneva
46. georgia
47. georgia italic impact
48. geotype tt
49. helterskelter
50. helvetica
51. herman
52. highlight let
53. impact
54. jester
55. joan
56. john handy let
57. jokerman let
58. kelt
59. kids
60. kino mt
61. la bamba let
62. latha
63. lithograph
64. lucida console
65. lucida sans console
66. lucida sans unicode
67. map symbols
68. marlett
69. matteroffact
70. matisse itc
71. matura mt script capitals
72. mekanik let
73. modern
74. modern ms sans serif
75. monaco
76. monospace
77. monotype sorts
78. ms linedraw
79. ms sans serif
80. ms serif
81. mv boli
82. new york
83. nyala
84. olddreadfulno7 bt
85. orange let
86. palatino
87. palatino linotype
88. playbill
89. pump demi bold let
90. puppylike
91. roland
92. roman
93. sans-serif
94. script
95. scripts
96. scruff let
97. segoe print
98. segoe script
99. segoe ui
100. serif
101. short hand
102. signs normal
103. simplex
104. simpson
105. small fonts
106. stylus bt
107. superfrench
108. surfer
109. swis721 bt
110. swis721 blkoul bt
111. symap
112. symbol (symbol)
113. tahoma
114. technic
115. tempus sans itc
116. terk
117. times
118. times new roman
119. trebuchet ms
120. trendy
121. txt
122. tunga
123. verdana
124. victorian let
125. vineta bt
126. vivian
127. webdings (webdings)
128. western
129. westminster
130. westwood let
131. wide latin
132. wingdings (wingding)
133. zapfellipt bt

1. ACADEMY ENGRAVED LET
2. ALGERIAN
3. AMAZE
4. ARIAL
5. ARIAL BLACK
6. BALTHAZAR
7. BANKGOTHIC LT BT
8. BART
9. BIMINI
10. BOOK ANTIQUA
11. BOOKMAN OLD STYLE
12. BRAGGADOCIO
13. BRITANNIC BOLD
14. BRUSH SCRIPT MT
15. CALIBRI
16. CAMBRIA
17. CANDARA
18. CENTURY GOTHIC
19. CENTURY SCHOOLBOOK
20. CHASM
21. CHICAGO
22. COLONNA MT
23. COMIC SANS MS
24. COMMERCIALSCRIPT BT
25. CONSOLAS
26. CONSTANTIA
27. COOLSVILLE
28. CORBEL
29. COURIER
30. COURIER NEW
31. CURSIVE
32. DAYTON
33. DESDEMONA
34. ESTRANGELO EDESSA
35. FANTASY
36. FLAT BRUSH
37. FOOTLIGHT MT LIGHT
38. FRANKLIN GOTHIC MEDIUM
39. FUTURABLACK BT
40. FUTURALIGHT BT
41. GABRIOLA
42. GARAMOND
43. GAUTAMI
44. GAZE
45. GENEVA
46. GEORGIA
47. GEORGIA ITALIC IMPACT
48. GEOTYPE TT
49. HELTERSKELTER
50. HELVETICA
51. HERMAN
52. HIGHLIGHT LET
53. IMPACT
54. JESTER
55. JOAN
56. JOHN HANDY LET
57. JOKERMAN LET
58. KELT
59. KIDS
60. KINO MT
61. LA BAMBA LET
62. LATHA
63. LITHOGRAPH
64. LUCIDA CONSOLE
65. LUCIDA SANS CONSOLE
66. LUCIDA SANS UNICODE
67. MAP SYMBOLS
68. MARLETT
69. MATTEROFFACT
70. MATISSE ITC
71. MATURA MT
72. MEKANIK LET
73. MODERN
74. MODERN MS SANS SERIF
75. MONACO
76. MONOSPACE
77. MONOTYPE SORTS
78. MS LINEDRAW
79. MS SANS SERIF
80. MS SERIF
81. MV BOLI
82. NEW YORK
83. NYALA
84. OLDDREADFULNO7 BT
85. ORANGE LET
86. PALATINO
87. PALATINO LINOTYPE
88. PLAYBILL
89. PUMP DEMI BOLD LET
90. PUPPYLIKE
91. ROLAND
92. ROMAN
93. SANS-SERIF
94. SCRIPT
95. SCRIPTS
96. SCRUFF LET
97. SEGOE PRINT
98. SEGOE SCRIPT
99. SEGOE UI
100. SERIF
101. SHORT HAND
102. SIGNS NORMAL
103. SIMPLEX
104. SIMPSON
105. SMALL FONTS
106. STYLUS BT
107. SUPERFRENCH
108. SURFER
109. SWIS721 BT
110. SWIS721 BLKOUL BT
111. SYMAP
112. SYMBOL (SYMBOL)
113. TAHOMA
114. TECHNIC
115. TEMPUS SANS ITC
116. TERK
117. TIMES
118. TIMES NEW ROMAN
119. TREBUCHET MS
120. TRENDY
121. TXT
122. TUNGA
123. VERDANA
124. VICTORIAN LET
125. VINETA BT
126. VIVIAN
127. WEBDINGS (WEBDINGS)
128. WESTERN
129. WESTMINSTER
130. WESTWOOD LET
131. WIDE LATIN
132. WINGDINGS (WINGDINGS)
133. ZAPFELLIPT BT

Шрифты бывают с засечками (с постоянной толщиной линий — брусковый, и переменной — антиква; их применяют для оформления основного текста документа) и рубленые (гротески, используются для набора заголовков).

По стилю различают шрифт: Прямой (Roman), Курсивный (Italic), Полужирный (Bold), Нормальный (Regular, отличается от прямого меньшей толщиной штриха), Узкий (Narrow), Широкий (Wide).

Дополнительные параметры форматирования символов: подчеркивание различными типами линий (Подчеркнутый, Underline), изменение вида значков (зачёркнутый, надстрочный, подстрочный, с тенью, контур, все прописные), изменение расстояний между символами (межсимвольный интервал — обычный, разреженный или уплотнённый).

По ширине символов шрифты делят на моноширинные (как на старой печатной машинке) и пропорциональные. Например, буква «I» будет намного уже, чем «W». В CSS — моноширинный шрифт выбирается или с помощью конструкции font-family: monospace, и/или указанием названия конкретного моно-шрифта. Например:

Значения ширины шрифтов (font-weight) задаются по цифровой шкале, где значение «400» соответствует «Normal» данного семейства шрифтов. Названия веса, ассоциированные с такой шириной, обычно: Book, Regular, Roman, Normal, Medium. «Bold» соответствует весовому значению «700», Heavy — «800», Black — «900».

нижний регистр	ВЕРХНИЙ РЕГИСТР

Название шрифта	Win 2000	Win XP	Vista	Win 7	Win 8
Arial	+	+	+	+	+
Arial Black	+	+	+	+	+
Book Antiqua	+
Calibri	+	+	+
Cambria	+	+	+
Candara	+	+	+
Comic Sans MS	+	+	+	+	+
Consolas	+	+	+
Constantia	+	+	+
Corbel	+	+	+
Courier	+	+	+	+	+
Courier New	+	+	+	+	+
Estrangelo Edessa	+	+	+	+
Franklin Gothic Medium	+	+	+	+
Gautami	+	+	+	+
Gabriola	+	+
Georgia	+	+	+	+	+
Georgia Italic Impact	+
Impact	+	+	+	+	+
Latha	+	+	+	+
Lucida Console	+	+	+	+	+
Lucida Sans Console	+	+	+	+
Lucida Sans Unicode	+	+	+	+	+
Marlett	+	+	+	+	+
Modern	+	+
Modern MS Sans Serif	+
MS Sans Serif	+	+	+	+	+
MS Serif	+	+	+	+	+
MV Boli	+	+	+	+
Nyala	+	+	+
Palatino Linotype	+	+	+	+	+
Roman	+	+	+	+	+
Script	+	+	+	+	+
Segoe Print	+	+	+
Segoe Script	+	+	+
Segoe UI	+	+	+
Small Fonts	+	+
Symbol	+	+	+	+	+
Tahoma	+	+	+	+	+
Tempus Sans ITC	+
Times New Roman	+	+	+	+	+
Trebuchet MS	+	+	+	+	+
Tunga	+	+	+	+
Verdana	+	+	+	+	+
Webdings	+	+	+	+	+
Westminster	+
Wingdings	+	+	+	+	+

Рекомендуется прописывать шрифт в CSS, сгруппировав сразу 3-4 похожих шрифта на случай отсутствия основного из них у конечного пользователя.
Пример: font-family: Webdings, Garamond, Times New Roman, Sans;

Ниже приведен список стандартных шрифтов для операционной системы Microsoft Windows и MacOS X Apple. В таблице использованы группы стандартных шрифтов Windows и Mac для безопасного использования во всех браузерах.

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
Arial Black, Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
Comic Sans MS, cursive	Comic Sans MS	Comic Sans MS 5	cursive
Courier New, Courier, monospace	Courier New	6	monospace
Georgia, serif	Georgia 1	Georgia	serif
Impact, Charcoal, sans-serif	Impact	Impact 5 , Charcoal 6	sans-serif
Lucida Console, Monaco, monospace	Lucida Console	Monaco 5	monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif	Palatino Linotype, Book Antiqua 3	Palatino 6	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
Times New Roman, Times, serif	Times New Roman	Times	serif
Trebuchet MS, Helvetica, sans-serif	Trebuchet MS 1	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol 2	Symbol 2	—
Webdings	Webdings 2	Webdings 2	—
Wingdings, Zapf Dingbats	Wingdings 2	Zapf Dingbats 2	—
MS Sans Serif, Geneva, sans-serif	MS Sans Serif 4	Geneva	sans-serif
MS Serif, New York, serif	MS Serif 4	New York 6	serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype, который поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут отображаться с пикселизацией в крупных размерах. Эти шрифты предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании и не работают при выделении жирным или курсивом. Comic Sans MS также используется жирным выделением, но не курсивом. Другие Mac-браузеры самостоятельно эмулируют отсутствующие у шрифтов свойства.

6 Эти шрифты устанавливаются в Mac только при Classic-инсталляции.

Windows Vista, Internet Explorer 7, ClearType включен:

Windows Vista, Firefox 2.0, ClearType включен:

Mac OS X 10.4.8, Firefox 2.0, ClearType включен: