Какие шрифты поддерживает css
Перейти к содержимому

Какие шрифты поддерживает css

  • автор:

Шрифты в HTML (font, font-family, font-face)

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

В этой статье мы разберём сначала системные бесплатные шрифты, а потом научимся подключать шрифты из файлов.

Веб безопасные шрифты

Шрифт можно указать с помощью CSS свойства «font-family». Если перевести дословно название этого свойства, то получится «семейство шрифтов». В значении этого свойства необходимо указать название шрифта. К примеру:

Тише, мыши, кот на крыше.

На странице с таким кодом будет показан текст, написанный шрифтом Arial

Тише, мыши, кот на крыше.

Но текст будет написан этим шрифтом только в том случае, если этот шрифт есть у пользователя, который просматривает сайт. Если этого шрифта нет в его системе, то будет выбран стандартный. Поэтому если вы не хотите подключать файлы шрифтов в CSS, то стоит указать в качестве шрифта один из так называемых «веб безопасных шрифтов». Эти безопасные шрифты точно будут отображаться на любой системе. Вот список их названий и примеры:

Arial: Тише, мыши, кот на крыше. Arial: Тише, мыши, кот на крыше. Verdana: Тише, мыши, кот на крыше. Georgia: Тише, мыши, кот на крыше. Impact: Тише, мыши, кот на крыше. Arial Black: Тише, мыши, кот на крыше. Comic Sans MS: Тише, мыши, кот на крыше. Trebuchet MS: Тише, мыши, кот на крыше. Courier New: Тише, мыши, кот на крыше. Times New Roman: Тише, мыши, кот на крыше. 

В разных операционных системах шрифты могут выглядеть по-разному из-за авторских прав. К примеру, шрифта «Times New Roman» нет на операционной системе Linux (а на этой системе работает большинство мобильных устройств). В таких случаях система будет подставлять шрифт, который похож на требуемый, но не идентичен ему.

Можно указать несколько шрифтов через запятую. Тогда если в системе нет шрифта, то будет взят следующий из списка.

Тише, мыши, кот на крыше.
  • serif — шрифт с засечками на концах букв. К примеру, Times New Roman
  • sans-serif — шрифт без засечек. К примеру, Arial
  • cursive — курсивный шрифт
  • fantasy — декоративный шрифт
  • monospace — моноширинный шрифт (все буквы одинаковой ширины)
Тише, мыши, кот на крыше.

Шрифты в подключаемых файлах (font-face)

Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу @font-face. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:

  Тише, мыши, кот на крыше.
  • font-family — указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
  • url(‘ . ‘) — указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.

Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз — потом он попадает в кеш.

Какие шрифты поддерживает css

HTML Fonts

Визуализация стандартных шрифтов

Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере или мобильном устройстве у посетителей сайта. Каждый владелец устройства может иметь набор разных шрифтов, поэтому на сайтах можно использовать стандартные шрифты, либо загружать нестандартные вместе с сайтом. Браузеры используют ограниченное количество стандартных шрифтов, таких как 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».

Стандартные шрифты для разных версий Windows

Название шрифта 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 включен:

HTML Fonts

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

HTML Fonts

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

HTML Fonts

Windows 2000, IE 6.0:

HTML Fonts

Поделитесь страницей в социальных сетях

11 комментариев на «Список шрифтов для использования в HTML-коде»

  1. Кубанычбек пишет:
    09 Ноя 2015 в 3:38 пп мне понравилось. СПАСИБО.
  2. Владимир пишет:
    30 Апр 2016 в 3:19 пп Отличная подборка, спасибо!
    А то везде по 10-20 шрифтов.
    А вот 133 мне точно хватит ))
  3. Admin пишет:
    13 Июн 2016 в 1:44 пп Спасибо за отзыв!
    Если есть ещё потребности в шрифтах — пишите, добавим.
  4. binarybets пишет:
    05 Июл 2016 в 12:17 пп спасибо, как раз подбираю нормальный шрифт для своего сайта
  5. Давид пишет:
    15 Янв 2017 в 9:28 дп А есть 8 битный шрифт?
  6. Admin пишет:
    16 Июл 2017 в 2:56 пп В списке есть 8-битные шрифты, но они отдельно не выделены.
  7. DmitriyOa пишет:
    28 Янв 2017 в 12:19 дп Салют народ!
    Удобная табличка 🙂
  8. GeneralOa пишет:
    29 Янв 2017 в 10:43 пп Всем привет! А как быть с нестандартными шрифтами?
  9. Admin пишет:
    16 Июл 2017 в 2:52 пп Нестандартные шрифты можно подключать при помощи специальных скриптов. По сути, шрифты будут подгружаться на компьютер вместе с сайтом при каждом открытии. Это влечёт увеличение нагрузки, но оформление сайтов, конечно же, будет выгодно отличаться.
  10. AgrnoNof пишет:
    23 Фев 2017 в 3:32 дп Вот это самое то!
    Находка дня 🙂
  11. Tinav-O пишет:
    23 Мар 2017 в 1:30 пп О, спасибо, Великий гуру. Как раз не хватало таких замечательных табличек!

© 2008-2017 HD Systems Worldwide, Россия, Москва.
При использовании материалов сайта, ссылка на источник обязательна.

Памятки разработчикам:

  • Теги HTML/XHTML
  • Памятка по HTML и CSS
  • BB-коды для форумов
  • Cимволы Unicode
  • Коды цветов
  • Шрифты для сайтов
  • Размеры шрифтов
  • Буквенные коды стран
  • Обновления Windows 7 и 8

CSS3 — шрифты

Среди всех новых захватывающих возможностей CSS3 трудно выбрать наилучшее. Но если бы пришлось выбирать только одну возможность, которая открывает дверь для лавины новых перспектив и которую можно использовать прямо сейчас, такой возможностью вполне могут быть веб-шрифты.

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

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

Крупные компании, наподобие Microsoft, не горели желанием (что вполне понимаемо) добавлять функциональность, которая могла бы потакать загрузке веб-разработчиками установленных на компьютере шрифтов на веб-сайт без должного на то разрешения.

В CSS3 поддержка сложных шрифтов обеспечивается посредством возможности @font-face, которая применяется следующим образом:

  1. Требуемый шрифт (или, более вероятно, несколько версий шрифта для поддержки разных браузеров) загружается на сайт.
  2. Каждый шрифт регистрируется в таблице стилей с помощью команды @font-face.
  3. Зарегистрированный шрифт используется в правилах стиля указанием его названия, точно так же, как и обычные веб-шрифты.
  4. Когда браузер обнаруживает таблицу стилей, в которой используется специальный веб-шрифт, он загружает этот шрифт с сервера в свой кэш для временного хранения страниц и изображений. После этого браузер использует этот шрифт только для данной страницы или сайта. Если этот же шрифт указывается в другой странице, он должен быть зарегистрирован на этой странице и загружен на ее сервер, откуда он может быть загружен браузером в свой кэш.

В последующих разделах мы рассмотрим эти шаги более подробно.

Форматы веб-шрифтов

Хотя все современные браузеры поддерживают возможность @font-face, не все они поддерживают одинаковые типы файлов шрифтов. Например, Internet Explorer, который обеспечивает использование @font-face в течение многих лет, поддерживает только файлы типа . Этот формат предоставляет ряд преимуществ, например, в нем используется сжатие для уменьшения объема файла шрифтов, а также применяется строгое лицензирование для веб-сайтов, чтобы шрифт нельзя было украсть с одного сайта и использовать на другом.

Но формат EOT никогда ни пользовался большой популярностью и не используется никакими другими браузерами. Вместо него браузеры работают с более знакомыми стандартами шрифтов, применяемыми в компьютерных приложениях — и . Кроме этого, существуют еще два типа отображения шрифтов — SVG и WOFF. В таблице ниже дано краткое описание всех этих форматов шрифтов:

Форматы внедряемых шрифтов

Формат Описание Используется в
TTF (TrueType), OTF (OpenType PostScript) Распространенные форматы шрифтов настольных компьютеров Firefox (до версии 3.6), Chrome (до версии 6), Safari и Opera
EOT (Embedded OpenType) Формат, специфичный для продуктов корпорации Microsoft. Не завоевал популярности у браузеров, за исключением Internet Explorer Internet Explorer (до версии IE 9)
SVG (Scalable Vector Graphics) Универсальный графический формат, который можно использовать для создания шрифтов. Дает хорошие, но не отличные результаты — медленно отображается и демонстрирует текст пониженного качества Safari Mobile (на iPhone и iPad до iOS 4.2) и мобильные устройства под управлением операционной системы Android
WOFF (Web Open Font Format) Возможно, единый формат шрифтов будущего. Поддерживается новыми версиями браузеров Любой поддерживающий браузер, начиная с Internet Explorer 9, Firefox 3.6 и Chrome 6

В итоге можно сказать следующее: если вы хотите использовать возможность @font-face и поддерживать широкий диапазон браузеров, вам нужно предоставлять ваш шрифт в нескольких разных форматах. Как минимум, шрифт нужно предоставить в формате TTF или OTF (без разницы), EOT и SVG. Хорошо (но не обязательно) также предоставить шрифт в перспективном формате WOFF, может стать более популярным и лучше поддерживаемым в будущем. (Одним из достоинств этого формата является использование сжатых файлов, что сокращает время их загрузки.)

Даже если вы последуете всем приведенным ранее правилам и предоставите все требуемые форматы шрифтов, ожидайте некоторые загвоздки. В частности, с веб-шрифтами иногда возникают следующие проблемы:

  • Многие шрифты выглядят плохо в операционной системе Windows XP, т.к. в настройках многих компьютеров с этой операционной системой отключено сглаживание (anti-aliasing). (А без применения сглаживания шрифты выглядят очень непривлекательно.)
  • От пользователей поступали жалобы о проблемах с печатью определенных внедренных шрифтов из некоторых браузеров или в операционных системах.
  • Некоторые браузеры страдают проблемой FOUT (Flash of Unstyled Text, вспышка нестилизованного текста). Это явление происходит, когда внедренный шрифт не успевает загрузиться вовремя, и страница отображается сначала в резервном шрифте, а потом воспроизводится повторно на встроенном шрифте. Эта проблема особенно заметна в старых версиях браузера Firefox. Если вас это сильно беспокоит, можете воспользоваться библиотекой JavaScript от Google, позволяющей разработчику определить резервные стили, которые используются вместо незагруженных внедренных шрифтов, таким образом, предоставляя ему полный контроль над воспроизведением текста в любое время.

Хотя эти небольшие проблемы иногда и возникают, большинство из них постепенно решается с выпуском новых версий браузеров. Например, браузер Firefox теперь сводит эффект FOUT к минимуму, ожидая до трех секунд, пока не загрузится внедренный шрифт, прежде чем использовать резервный шрифт.

Наборы шрифтов

Вы, наверное, уже задаетесь вопросом, где можно взять разные файлы шрифтов, которые могут вам потребоваться? Легче всего будет загрузить готовый набор шрифтов из Интернета, получив, таким образом, все требуемые файлы шрифтов. Недостаток этого подхода состоит в том, что ваш выбор ограничивается тем, что вы сможете найти в глобальной сети. Чтобы помочь вам в поиске наборов веб-шрифтов, можно порекомендовать воспользоваться одним из лучших сайтов шрифтов — Font Squirrel. На рисунке ниже показано несколько шрифтов из предоставляемых на этом сайте наборов:

Загрузка шрифтов

Сайт Font Squirrel предоставляет для загрузки несколько сотен высококачественных шрифтов, организованных в разделы по категориям (такие как, например, Calligraphic, Grunge или Retro). Но самое приятное, что все эти шрифты бесплатные для любого использования, будь то на персональном компьютере для создания документов или на веб-странице в Интернете.

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

@font-face

Строки приведенного кода выполняют следующие функции:

  • Выражение @font-face регистрирует шрифт для его дальнейшего применения в таблице стилей.
  • Шрифту можно присвоить любое название. Это название будет употреблено позже, при использовании шрифта.
  • Первым должен быть указан формат EOT, т.к. дальнейшая часть правила сбивает с толку Internet Explorer, и тот не обращает внимания на остальные форматы. Функция таблицы стилей url() указывает браузеру загрузить файл из обозначенного URL. Если шрифт размещен в одной папке с веб-страницей, то здесь можно просто указать название файла.
  • Функция local() указывает браузеру название шрифта, и если этот шрифт установлен на компьютере посетителя веб-страницы, браузер использует локальный шрифт. Но в редких случаях это может вызвать проблемы. Например, в зависимости от того, где установлен шрифт на компьютере посетителя, компьютеры Mac OS X могут вывести предупреждение о нарушении безопасности, или же может загрузиться другой шрифт с таким же названием, как и ваш. По этой причине веб-разработчики иногда указывают явно несуществующее имя файла, чтобы браузер не нашел локального шрифта. В качестве простого имени такого типа можно использовать какой-либо бессмысленный символ.
  • Последний шаг — это сообщить браузеру о других файлах шрифтов, которые он может использовать. Если имеется файл шрифта типа WOFF, укажите этот файл первым, т.к. данный формат предоставляет наилучшее качество шрифта. Следующим укажите файл шрифта формата TTF или OTF, а самым последним — файл формата SVG.

Зарегистрировав веб-шрифт с помощью функции ©font-face, вы можете использовать его в любой таблице стилей. Для этого используется уже знакомое нам свойство font-family, которому присваивается значение в виде названия семейства шрифтов, зарегистрированного с помощью функции @font-face (в строке 2). Далее приведен пример использования этого шрифта в правиле таблицы стилей:

body

Это правило применяет веб-шрифт ко всей странице, хотя область его применения, конечно же, можно было бы ограничить определенными элементами или применить классы. Но шрифт нужно в обязательном порядке зарегистрировать до того, как использовать его в правиле таблицы стилей. Если выполнить эти шаги в обратном порядке, шрифт не будет работать должным образом.

Веб-шрифты Google

Еще один источник бесплатных веб-шрифтов —- это служба Google Web Fonts. Ее особенность в том, что пользователю не нужно беспокоиться о форматах шрифтов, т.к. Google определяет браузер посетителя страницы и автоматически отправляет файл шрифта нужного формата.

Чтобы использовать шрифт Google в своих страницах, выполните такую последовательность шагов:

  1. Откройте в браузере страницу Google Web Fonts. Откроется страница, содержащая длинный список имеющихся в наличии шрифтов.
  2. Выберите способ просмотра шрифтов, перейдя на одну из вкладок вверху страницы — Word (Слово), Sentence (Предложение), Poster или Paragraph (Абзац). Например, если вы ищете шрифт для заголовка, вам, скорее всего, следует выбрать вкладку Word или Sentence, чтобы посмотреть на шрифт в одном слове или предложении соответственно. Но если вам шрифт нужен для текста, то следует выбрать вкладку Paragraph, чтобы просмотреть, как этот шрифт будет выглядеть в большом фрагменте текста. При любой выбранной опции просмотра можно ввести свой текст образца и установить желаемый размер шрифта.
  3. Настройте опции поиска. Если вы знаете название требуемого вам шрифта, введите его в поле поиска. В противном случае нужно будет просматривать все шрифты, прокручивая страницу вверх, что для латинских шрифтов может занять значительное время. Чтобы ускорить поиск, можно отсортировать и отфильтровать список согласно определенным критериям, например, наиболее популярные жирные шрифты без засечек.
  4. Обнаружив подходящий шрифт, щелкните по ссылке Pop out. Откроется новое окно, содержащее описание шрифта и все его подробности.
  5. Если на этом этапе вы решите использовать данный шрифт, щелкните по ссылке Quick-use на исходной странице. Откроется окно, содержащее код, требуемый для использования данного шрифта. Код состоит из ссылки на таблицу стилей, которую нужно вставить в разметку вашей веб-страницы, и примера правила таблицы стилей, применяющего шрифт.
  6. Вставьте в свою веб-страницу ссылку на таблицу стилей. Например:

WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения

  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Облачные технологии. Защита информации.
  • Разработка WEB-сайтов. Дизайн, прототипирование, современные технологии построения сайтов.
  • Интернет-маркетинг. SEO, продвижение сайтов в интернет.
  • Основы современных IT — технологий.

Наши преимущества

  • Заочное обучение проводится в группах и индивидуально.
  • При индивидуальном обучении программы ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • При индивидуальном обучении преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время , в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно . Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.

Курсы WEB

  • Дизайн, макетирование, прототипирование интернет-сайтов
  • Разработка, создание WEB-сайтов
  • Дигитальный маркетинг, реклама в интернет, оптимизация и «продвижение» сайтов, товаров, услуг в Интернет, SEO оптимизация.

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB — хостинге, оптимизировать их и «продвигать» в Интернете.

Начав работать по окончании курса и зарабатывать в этой области, Вы сможете сориентироваться, что именно Вам нужно для дальнейшего успешного продвижения в выбранной специальности и пройти у нас более основательные курсы по WEB-программированию, WEB-дизайну, рекламе и продвижению сайтов в интернет.

Узнать подробнее

Регистрация на сайте

Вы здесь: Главная > Материалы на Русском языке > Дополнительные статьи > CSS — шрифты
Обновлено: 27.08.2018 18:04

CSS — работа со шрифтами

Для внешнего вида WEB — сайта большое значение имеет то, как и какие шрифты (fonts) Вы используете. Шрифт определяет начертание букы текста.

Все шрифты, которые сайт использует, должны быть всегда доступны браузеру клиента, откуда бы он ни смотрел сайт (Windows, Linux, Android, Mac , . ).

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

Указания браузеру, какие именно шрифты использовать, даются с помощью CSS — директивы font-family.

Например — для двух CSS — классов (.MySansSerif и .MyMonospace ) :

.MySansSerif < font-family: Arial, Helvetica, sans-serif; >.MyMonospace < font-family: "Courier New", Courier, monospace; >

Для этой директивы (font-family) в качестве значения задаётся список имён шрифтов (через запятую, в порядке приоритета), из которых браузер выбирает доступные шрифты (Arial, Helvetica, sans-serif).

Универсальные WEB — шрифты (Safe web fonts)

Это те шрифты, которые практически наверняка есть на любом компьютере, с которого заходит посетитель Вашего сайта

По типу шрифтов.

Шрифты Serif

font-family Пример шрифта
Georgia, serif Пример шрифта
«Times New Roman», Times, serif Пример шрифта
«Palatino Linotype», Palatino, «Book Antiqua», serif Пример шрифта

Шрифты Sans-Serif

font-family Пример шрифта
Arial, Helvetica, sans-serif Пример шрифта
«Arial Black», Gadget, sans-serif Пример шрифта
Impact, Charcoal, sans-serif Пример шрифта
Tahoma, Geneva, sans-serif Пример шрифта
«Trebuchet MS», Helvetica, sans-serif Пример шрифта
Verdana, Geneva, sans-serif Пример шрифта

Шрифты Monospace

font-family Пример шрифта
Courier, monospace Пример шрифта
«Courier New», Courier, monospace Пример шрифта
«Lucida Console», Monaco, monospace Пример шрифта

Шрифты Cursive

font-family Пример шрифта
«Comic Sans MS», cursive Пример шрифта
«Courier New», Courier, monospace Пример шрифта
«Lucida Console», Monaco, monospace Пример шрифта

Сохранение шрифтов на сервере

WEB — шрифты можно хранить на сервере, вместе с WEB сайтом. Для этого нужно:

  • сохранить файлы шрифтов на сервере
  • при помощи CSS директивы @font-face описать шрифты, которые предполагается использовать в документе
  • при помощи директивы CSS font-family закрепить шрифты за HTML — элементами.

Файлы — описания шрифтов можно купить у разработчика, можно скачать бесплатные (например — Google Fonts).

В директиве @font-face указывается имя, под которым далее шрифт будет использоваться в HTML — документе, путь к папке со шрифтами на сервере и имя файла, содержащего конкретный шрифт.

@font-face < font-family: Molle-Regular; src: url(Molle-Regular.ttf);

Далее этот шрифт можно использовать через CSS директиву font-family. Например директива:

.MyMonospace < font-family: Molle-Regular; >

назначает классу .MyMonospace шрифт из файла: Molle-Regular.ttf

Использование шрифтов из библиотек (CDN — Content Delivery Network)

Существует ряд online- ресурсов, на которых хранятся шрифты, и с которых эти шрифты можно подгружать в HTML документ.

подключает к HTML документу шрифт «Open Sans»; . И далее его можно использовать через CSS — директиву

font-family: «Open Sans»;

В удобной форме посмотреть доступные Google-шрифты и сразу получить ссылку на нужный можно, например, по этой ссылке: fontcdn.org

Дополнительные свойства шрифтов

CSS поддерживает большое количество свойств, которые позволяют модифицировать выбранный шрифт.

Свойства CSS font
Свойство Описание
font Задаются все свойства шрифта в одном параметре
font-family Задаёт шрифт
font-size Размер шрифта
font-style Стиль шрифта
font-variant Модификация шрифта
font-weight Толщина линии

style=» font-size :200%; font-style :italic; font-variant :small-caps; font-weight :bold; »
Показывает отформатированный текст:
Отформатированный текст.

Свойства CSS text
Свойство Описание
color Цвет текста
direction Направление текста / направление написания
letter-spacing Увеличивает или уменьшает пространство между символами в тексте
line-height Устанавливает высоту строки
text-align Определяет горизонтальное выравнивание текста
text-decoration Определяет декорацию текста
text-indent Определяет отступ первой строки в текстовом блоке
text-shadow Определяет эффект тени добавляется к тексту
text-transform Управляет капитализации текста
unicode-bidi Используется вместе с направлением собственности , чтобы установить или вернуться , должен ли текст быть перекрыты для поддержки нескольких языков в одном документе
vertical-align Устанавливает вертикальное выравнивание элемента
white-space Определяет, как обрабатываются пробелы
word-spacing Увеличивает или уменьшает пространство между словами в тексте

style=» color: rgb(217, 217, 217); font-size: 30px; background-color: rgb(186, 186, 186); text-shadow: rgb(46, 46, 46) 0px 2px 3px; text-align:center; font-weight:bolder; line-height:150%; «

Показывает отформатированный текст:
Отформатированный текст

style=» color: #CEF0D4; font-family: ‘Rouge Script’, cursive; font-size: 30px; font-weight: normal; line-height: 10px; text-align: center; text-shadow: 1px 1px 2px #082b34;»> «

Показывает отформатированный текст:
Отформатированный текст

style=» padding: 20px; text-align: center; text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8); color: #cdcdcd; background-color:#cdcdcd; opacity: 0.4; font-size: 6em; font-weight: bold; font-family: Helvetica; «

Показывает отформатированный текст:

style=» color: #fff; text-align: center; font-size: 6em; font-weight: bold; font-family: Helvetica; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); «

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *