Шрифты - это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В статье пойдет речь о подключении стандартных шрифтов к web странице, их еще называют системными.
Системные, стандартные, безопасные шрифты
Любой браузер отображает только те шрифты, которые присутствуют в операционной системе компьютера. Поэтому их и называют системными и устанавливаются по умолчанию вместе с операционной системой.
А безопасными шрифтами их называют, потому что с большой вероятностью они отобразятся в браузере у большинства посетителей сайта.
Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах Windows, Mac OS. А в Unix/Linux вообще нет стандартного набора.
Для того, чтобы интернет страничка отображалась в соответствии с задумкой дизайнера, в CSS установили свойство шрифтов, которое называется font-family
Свойство шрифтов font-family
Свойство font-family - семейства шрифтов, сгруппированные по определенным признакам.
Родовые семейства:- serif - шрифты с засечками на концах;
- sans-serif - шрифты без засечек;
- cursive - шрифты курсивного начертания;
- fantasy - декоративные шрифты;
- monospace - моноширинный шрифт(с буквами одинаковой ширины).
Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.
Вот как пример, просто для визуального восприятия. К этому примеру мы еще вернемся, когда будет рассматриваться непосредственно подключение шрифтов.
Просто проследите логику и все станет предельно ясно.
Body { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; } Разберем написанное:
- OC Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Родовое семейство - sans-serif.
Так называемые безопасные шрифты
На основе OC Windows был составлен список из нескольких безопасных шрифтов.
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Все эти шрифты установлены на Mac OS X, Windows, и у многих пользователей Unix/Linux, у которых установлен пакет Core fonts for the Web.
Для остальных пользователей предусмотрена таблица соответствия. В ней подобраны похожие шрифты, принадлежащие к определенному семейству.
Таблица соответствия и принадлежности шрифтов к определенному семейству:
Windows | Mac OS | Unix/Linux | Родовое семейство |
---|---|---|---|
Arial Black | Helvetica CY | Nimbus Sans L | Sans-serif |
Arial | Helvetica CY | Nimbus Sans L | Sans-serif |
Comic Sans MS | Monaco CY | * (см. ниже) | cursive |
Courier New | * (см. ниже) | Nimbus Mono L | Monospace |
Georgia | * (см. ниже) | Century Schoolbook L | Serif |
Impact | Charcoal CY | * (см. ниже) | Sans-serif |
Times New Roman | Times CY | Nimbus Roman No9 L | Serif |
Trebuchet MS | Helvetica CY | * (см. ниже) | Sans-serif |
Verdana | Geneva CY | DejaVu Sans | Sans-serif |
* При подключении шрифтов, можете смело опираться на нее. Таблица поддерживает кириллические символы, русский алфавит.
Подключение системных шрифтов к сайту
Если нужно подключить основной шрифт для всего документа , нужно всего навсего в таблицу стилей CSS добавить такой код:
Body { /* подлючаем шрифт к всему документу */ font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* дополнительно устанавливаем размер шрифта */ font-size: 16px; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение - normal */ font-weight: 400; }
А вот так подключаются системные шрифты в Bootstrap 4 framevork: Шрифты подключаются с расчетом на мобильные устройства.
Body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
Назначаем шрифт для заголовков
H1, H2, H3, H4, H5, H6 — здесь аналогично, только устанавливаем значение жирности, для выделения заголовков:
H1, h2, h3, h4, h5, h6 { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к заголовкам */ font-weight: 600; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение - bold */ }
Присваиваем шрифт только параграфам:
p { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; } Построчно это выглядит так:- Подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам;
- Устанавливаем жирность шрифта, либо вместо 600, ставим значение - bold ;
- Дополнительно устанавливаем размер шрифта параграфам.
Что-бы присвоить шрифт только к определенному параграфу , или блоку, нужно сначала в HTML документе назначить класс этому блоку:
Здесь параграф с подключаемым шрифтом
А в таблице CSS прописать следующий код:
Main-font { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-weight: normal; font-size: 16px; }
Теперь, каждому тегу - элементу html с классом.font (называйте как вам угодно), будет присвоен шрифт Arial, с нормальной (400), жирностью и размером 16 пикселей.
Аналогично можно присвоить разные шрифты к спискам li , таблицам table , к целым блокам div , к отдельным словам, или словосочетаниям.
Подключение шрифтов непосредственно в HTML документе
Непосредственно в HTML документ шрифты подключаются аналогично CSS файлу, разница лишь в синтаксисе. Можно подключит шрифты в заголовке документа - между тегами
(аналогично CSS файлу) , либо inline - присвоение свойств напрямую к html тегам.Подключаем шрифты в заголовке , между тегами
. Для этого в html документ добавьте такой код:
Все аналогично подключению в CSS файле.
Подключение шрифтов inline
Непосредственно к элементам сайта. Приведу несколько примеров:
Подключаем шрифт к параграфу
Здесь параграф с текстом
Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифтЗдесь параграф с текстом, а это слово, которое нужно выделить жирным
Выделяем жирным шрифтом ссылку и присваиваем отдельный от основного шрифтЭто простой текст Здесь ссылка это тоже простой текст
Аналогично назначаем шрифты любому html тегу.
На заметку — Системные шрифты в Bootstrap 4
Разработчики известного Framework Bootstrap 4 подключают шрифты нижеприведенным образом, чтобы практически любые устройства использовали свои стандартные, системные шрифты.
Body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
Каждый дизайнер постоянно использует в своей работе для отображения текстовой информации. Обычно, при выборе шрифта ему приходится принимать во внимание не только привлекательность или читабельность гарнитуры, но и множество технических параметров.
Например, большинство типографий не примут документ, сверстанный с использованием системных шрифтов. Это связано с тем, что стандартные шрифты могут несколько отличаться в разных версиях .
А вот при разработке веб-страницы, напротив, следует выбирать шрифт из набора стандартных. Ниже приведена таблица присутствия базовых шрифтов в стандартной поставке разных версий Windows.
Название шрифта | Win95 | WinNT | Win98 | Win2000 | WinMe | WinXP |
---|---|---|---|---|---|---|
Abadi MT Condensed Light | ° | ° | + | ° | ° | ° |
Arial | + | + | + | + | + | + |
Arial Alternative Regular | ° | ° | ° | ° | + | ° |
Arial Alternative Symbol | ° | ° | ° | ° | + | ° |
Arial Black | ° | ° | + | + | + | + |
Arial Bold | + | + | + | + | + | + |
Arial Bold Italic | + | + | + | + | + | + |
Arial Italic | + | + | + | + | + | + |
Book Antiqua | ° | ° | + | ° | ° | ° |
Calisto MT | + | |||||
Century Gothic | ° | ° | + | ° | ° | ° |
Century Gothic Bold | ° | ° | + | ° | ° | ° |
Century Gothic Bold Italic | ° | ° | + | ° | ° | ° |
Century Gothic Italic | ° | ° | + | ° | ° | ° |
Comic Sans MS | ° | ° | + | + | + | ° |
Comic Sans MS Bold | ° | ° | + | + | + | + |
Copperplate Gothic Bold | ° | ° | + | ° | ° | ° |
Copperplate Gothic Light | ° | ° | + | ° | ° | ° |
Courier | + | + | + | + | + | + |
Courier New | + | + | + | + | + | + |
Courier New Bold | + | + | + | + | + | + |
Courier New Bold Italic | + | + | + | + | + | + |
Courier New Italic | + | + | + | + | + | + |
Estrangelo Edessa | ° | ° | ° | ° | ° | + |
Franklin Gothic Medium | ° | ° | ° | ° | ° | + |
Franklin Gothic Medium Italic | ° | ° | ° | ° | + | ° |
Gautami | ° | ° | ° | ° | ° | + |
Georgia | ° | ° | ° | + | ° | + |
Georgia Bold | ° | ° | ° | + | ° | + |
Georgia Bold Italic | ° | ° | ° | + | ° | + |
Georgia Italic | ° | ° | ° | + | ° | + |
Georgia Italic Impact | ° | ° | ° | ° | ° | + |
Impact | ° | ° | + | + | + | ° |
Latha | ° | ° | ° | ° | ° | + |
Lucida Console | ° | + | + | + | + | + |
Lucida Handwriting Italic | ° | ° | + | ° | ° | ° |
Lucida Sans Italic | ° | ° | + | ° | ° | ° |
Lucida Sans Unicode | ° | ° | + | + | ° | + |
Marlett | ° | ° | + | ° | + | ° |
Matisse ITC | ° | ° | + | ° | ° | ° |
Modern | + | + | + | + | ° | ° |
Modern MS Sans Serif | ° | ° | ° | ° | ° | + |
MS Sans Serif | + | + | + | + | + | + |
MS Serif | + | + | + | + | + | ° |
Mv Boli | ° | ° | ° | ° | ° | + |
News Gothic MT | ° | ° | + | ° | ° | ° |
News Gothic MT Bold | ° | ° | + | ° | ° | ° |
News Gothic MT Italic | ° | ° | + | ° | ° | ° |
OCR A E+tended | ° | ° | + | ° | ° | ° |
Palatino Linotype | ° | ° | ° | + | ° | + |
Palatino Linotype Bold | ° | ° | ° | + | ° | + |
Palatino Linotype Bold Italic | ° | ° | + | ° | + | ° |
Palatino Linotype Italic | ° | ° | ° | + | ° | + |
Roman | ° | + | ° | + | ° | + |
Script | ° | + | ° | + | ° | + |
Small Fonts | ° | + | ° | + | ° | + |
Smallfonts | + | ° | + | ° | + | ° |
Symbol | + | + | + | + | + | + |
Tahoma | ° | ° | + | + | + | + |
Tahoma Bold | ° | ° | + | + | + | + |
Tempus Sans ITC | ° | ° | + | + | ° | ° |
Times New Roman | + | + | + | + | + | + |
Times New Roman Bold | + | + | + | + | + | + |
Times New Roman Bold Italic | + | + | + | + | + | + |
Times New Roman Italic | + | + | + | + | + | + |
Trebuchet | ° | ° | ° | ° | + | ° |
Trebuchet Bold | ° | ° | ° | ° | + | ° |
Trebuchet Bold Italic | ° | ° | ° | ° | + | ° |
Trebuchet Italic | ° | ° | ° | ° | + | ° |
Trebuchet MS | ° | ° | ° | + | ° | + |
Trebuchet MS Bold | ° | ° | ° | + | ° | + |
Trebuchet MS Bold Italic | ° | ° | ° | + | ° | + |
Trebuchet MS Italic | ° | ° | ° | + | ° | + |
Tunga | ° | ° | ° | ° | ° | + |
Verdana | ° | ° | + | + | + | + |
Verdana Bold | ° | ° | + | + | + | + |
Verdana Bold Italic | ° | ° | + | + | + | + |
Verdana Italic | ° | ° | + | + | + | + |
Webdings | ° | ° | + | + | + | + |
Westminster | ° | ° | + | ° | + | + |
Wingdings | + | + | ° | + | ° | + |
WST_Czech | ° | ° | ° | ° | ° | + |
WST_Engl | ° | ° | ° | ° | ° | + |
WST_Fren | ° | ° | ° | ° | ° | + |
WST_Germ | ° | ° | ° | ° | ° | + |
WST_Ital | ° | ° | ° | ° | ° | + |
WST_Span | ° | ° | ° | ° | ° | + |
WST_Swedм | ° | ° | ° | ° | ° | + |
Следует учитывать, что наличие в системе любого шрифта зависит от выбранных при установке операционной системы опций, а так же используемого программного обеспечения.
Существует несколько шрифтов, которые входят в поставку любой версии Windows. Эти шрифты являются самыми безопасными для веб-дизайна и создания электронных документов, которые должны отображаться одинаково на разных компьютерах.
Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.
Существуют шрифты, которые не входят в поставку Windows ранних версий, однако почти обязательно присутствуют в системе (устанавливаются с дополнительным программным обеспечением, например, Microsoft Office). Безопасные шрифты: Arial, Courier, Courier New, MS Sans Serif, MS Serif, Symbol, Times New Roman.
В этой статье поделюсь своим решение проблемы с некорректной отображением шрифтов в Windows 7, требующей восстановления всех стандартных шрифтов в Windows 7 . Предыстория вопроса такова: недавно искал себе новые оригинальные шрифты для использования в графическом редакторе, скачал себе их целую гору, но тут заметил, что при добавлении нового шрифта в систему, если имеется совпадение, то оригинальный шрифт заменяется новым (инструкция как установить шрифты в windows 7 ). В результате такой деятельности, в половине системных панелях и приложениях стало невозможно работать из-за того, что они заговорили на незнакомых мне языках:).
Быстрое гугление по запросам «восстановить системные шрифты в Windows 7 » и «стандартные шрифты для Win 7 », особого результате не дало, предложенные решения не помогfkb (естественно, переустановка системы меня не устраивала). Поэтому я решил пойти своим путем и для начала просто скопировал оригинальные шрифты с заведомо нормальной системы (напомню, что шрифты хранятся в каталоге %windir%\fonts ) и заменил ими шрифты на своей системе. Решение помогло лишь отчасти, работать в системе стало возможно, появилась родные мне кириллические символы, однако параметры шрифтов оставляли желать лучшего. Во-первых, изменился размер некоторых шрифтов, либо же их написание перестало соответствовать оригиналу, либо шрифт почему-то стал жирным.
Однако мне удалось понять, как победить и эту проблему. Для этого необходимо сбросить параметры шрифтов в реестре, для чего скачайте приложенный ниже файл, позволяющий восстановить ассоциации для стандартных шрифтов в Windows 7. Скачать его можно :
Данный файл представляет собой экспортированное содержимое ветки реестра HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts в Win 7. После применения данного.reg файла систему нужно перезагрузить, о чудо! проблема со шрифтами должна пропасть!
Т.е. последовательность, которая помогла мне восстановить стандартные системные шрифты в Windows 7 такова:
- замена шрифтов в каталоге %windir%\fonts на шрифты с «чистой» системы
- экспорт ветки реестра HLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts
Надеюсь, если у вас тоже слетели шрифты, то это решение поможет и вам. В любом случае, если найдете альтернативную методику, которая помогла именно в вашей ситуацией – не стесняйтесь, делитесь в комментариях. По идее инструкция подойдет и в тех случаях, когда случайно удалили нужный шрифт, а после того, как его нашли и скопировали назад, глюки не пропадают.
PS . Если под рукой нет чистой Windows 7, архив со стандартными шрифтами можно скачать тут: http://narod.ru/disk/52061075001.99f42303cf1a0ac70dc978dd20406657/original_fonts.zip.html , размер архива около 350 Мб.
Выбор стандартного шрифта , используемого конкретной операционной системой, может улучшить производительность. Это относится к любому «безопасному для интернета » шрифту. Польза «системных » шрифтов заключается в том, что они совпадают с теми, которые уже использует операционная система, поэтому пользователю будет комфортно читать текст.
Классификация системных шрифтов :
ОС | Версия | Системный шрифт |
Mac OS X | El Capitan | San Francisco |
Mac OS X | Yosemite | Helvetica Neue |
Mac OS X | Mavericks | Lucida Grande |
Windows | Vista | Segoe UI |
Windows | XP | Tahoma |
Windows | 3.1 до ME | Microsoft Sans Serif |
Android | Ice Cream Sandwich (4.0)+ | Roboto |
Android | Cupcake (1.5) до Honeycomb (3.2.6) | Droid Sans |
Ubuntu | Все версии | Ubuntu |
Переходим к коду
Вступление показывает, что с появлением новых версий операционных систем приходят новые шрифты, а с ними и необходимость обновления стандартных шрифтов для сайта .
Метод 1: Системные шрифты на уровне элемента
Chrome и Safari недавно представили «system-ui » — универсальное семейство шрифтов, которое может быть использовано вместо «-apple-system » и «BlinkMacSystemFont «. Один из методов применения системных шрифтов - вызвать их напрямую для элемента, используя свойство font-family .
GitHub использует этот метод на своем сайте, применяя системные шрифты в body :
/* Системные шрифты используются GitHub */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
И Medium и WordPress admin используют схожий подход. Больше всего поддерживается Oxygen Sans (создан для операционной системы GNU+Linux ) и Cantarell (создан для операционной системы GNOME ).
Данный пример также демонстрирует поддержку некоторых типов смайликов и символов :
/* Системные шрифты, как их использует Medium и WordPress */ body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
Примечание: Этот метод можно использовать только для font family CSS стандартных шрифтов вместо более короткого font.
Метод 2: Стеки системных шрифтов
Ограничение первого метода заключается в необходимости вызывать полный стек шрифтов каждый раз, когда он применяется для элемента. А это может раздуть код, в зависимости от того, где и как оно используется.
Альтернативный метод, при котором системные шрифты объявляются с помощью свойства @font-face . Его преимущество заключается в том, что можно объявить шрифты один раз и затем применять их со свойством font-family вместо длинного списка шрифтов каждый раз.