Безопасные шрифты – CSS: Стандартные (безопасные) шрифты

Содержание

CSS: Стандартные (безопасные) шрифты

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

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

Шрифты с засечками — serif

font-familyПример
Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, serif

Это заголовок

Это абзац

Шрифты без засечек — Sans-Serif

font-familyПример
Arial, Helvetica, sans-serif

Это заголовок

Это абзац

«Arial Black», Gadget, sans-serif

Это заголовок

Это абзац

«Comic Sans MS», cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

«Lucida Sans Unicode», «Lucida Grande», sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

«Trebuchet MS», Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты — Monospace

font-familyПример
«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

С этой темой смотрят:

puzzleweb.ru

«Безопасные» шрифты и их применение в веб-дизайне

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

Список безопасных шрифтов

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например

Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

Screen Shot 2018-01-11 at 19.04.37

Screen Shot 2018-01-11 at 19.04.44

Screen Shot 2018-01-11 at 19.04.49

Screen Shot 2018-01-11 at 19.04.54

*Шрифт “Century Gothic” содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.

Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts.

Шрифты – иконки

1. http://fontawesome.io – Font Awesome
2. http://zurb.com/playground/foundation-icon-fonts-3 – Foundation icon
3. http://ionicons.com – ionicons
4. http://design.google.com/icons/ – Material Design Icons
5. http://octicons.github.com – Octicons
6. http://www.typicons.com – Typicons
Сервис для выбора иконок: http://glyphsearch.com

Vector-Icons

Web инструменты для работы со шрифтами

Подбор шрифтов

– http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS
– http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.

– http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.
– http://www.designerplaything.co.uk/designer-plaything.html – Подбор шрифта и цвета.
– http://www.texster.ru/ – Помощник в выборе шрифта.
– http://flippingtypical.com/ – Просмотр вашего текста в разном стиле.
– http://www.stcassociates.com/lab/fontbrowser.html – Аналогичен предыдущему (более расширен).
– http://www.blindtextgenerator.com/ru – Русский онлайн Lorem Ipsum генератор.
– http://wordmark.it/ – Просмотр вашего текста в разных стилях.

Распознавание шрифтов

– http://www.myfonts.com/WhatTheFont/ – Определение шрифта по образцу.
– https://www.fontspring.com/matcherator – Определение шрифта по образцу.
– http://www.identifont.com/identify.html – Выявляет шрифт через ряд вопросов о нем.
– http://www.typophile.com/ – Крупнейшее сообщество на тему шрифтов.

– http://www.bowfinprintworks.com/ – поиск шрифтов по образцам.
– http://www.fontshop.com/research/ – выясняет название по форме отдельных символов.
– http://www.flickr.com/groups/typeid/ – определяет названия шрифтов, используемых в различных изображениях.
– http://fount.artequalswork.com/ – бесплатный онлайн сервис для моментальной идентификации шрифта.

Скачать шрифты

– http://www.xfont.ru/ – Крупнейший сервис по шрифтам.
– http://www.fontov.net/ – бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
– http://ifont.ru/ – Большой русскоязычный сервис шрифтов.
– http://www.dafont.com/ – шрифты с просмотром вашего примера.
– http://www.fonts-online.ru/ – База шрифтов с просмотром Online

Прочее

– http://fontstruct.com/ – создание собственных шрифтов Online
– http://fontark.net/farkwp/ – Коструктор шрифтов Online

– http://www.fontsquirrel.com/fontface/generator – загрузка и доработка ваших шрифтов.
– http://pxtoem.com/ – Переводит одни единицы измерения шрифтов в другие.
– http://csswarp.eleqtriq.com/ – Онлайн сервис для подготовки эффектного текста.
– http://www.bestwebfonts.com/ – Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

Источник: pomelnikov.com

infogra.ru

Таблица безопасных web шрифтов

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


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

Описание шрифта

Примеры текстов

font-family: Arial, sans-serif;

Arial

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Arial Black, sans-serif;

Arial Black

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Comic Sans MS, cursive;

Comic Sans MS

Семейство шрифтов cursiveВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.
Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Courier New, monospace;

Courier New

Семейство шрифтов monospaceВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Georgia, serif;

Georgia

Семейство шрифтов serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Impact, Impact, Charcoal, sans-serif;

Impact (Impact, Charcoal в MacOs)

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.
Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Lucida Console, Monaco, monospace;

Lucida Console (Monaco в MacOs)

Семейство шрифтов monospaceВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;

Lucida Sans Unicode (Lucida Grande в MacOs)

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Palatino Linotype, Book Antiqua, Palatino, serif;

Palatino Linotype, Book Antiqua (Palatino в MacOs)

Семейство шрифтов serif
Воспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.
Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Tahoma, Geneva, sans-serif;

Tahoma (Geneva в MacOs)

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Times New Roman, Times New Roman, Times, serif;

Times New Roman (Times New Roman, Times в MacOs)

Семейство шрифтов serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Trebuchet MS, sans-serif;

Trebuchet MS

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.
Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Verdana, sans-serif;

Verdana

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Symbol;

Symbol

Воспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Webdings;

Webdings

Воспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: Wingdings, Zapf Dingbats;

Wingdings (Zapf Dingbats в MacOs)

Воспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: MS Sans Serif, Geneva, sans-serif;

MS Sans Serif (Geneva в MacOs)

Семейство шрифтов sans-serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

font-family: MS Serif, New York, serif;

MS Serif (New York в MacOs)

Семейство шрифтов serifВоспитание должно оказаться в силах сделать и тела и души наипрекраснейшими и наилучшими.Never discourage anyone... who continually makes progress, no matter how slow.

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

Есть необходимость в наших услугах?

Заполните форму и мы с радостью Вам ответим


Закрыть форму

www.ellipse-arts.ru

Что такое безопасные шрифты. лучших безопасных веб-шрифтов. Системные, стандартные, безопасные шрифты

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts ). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц и его новое свойство @font-face ; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family , облегчающее эту задачу.

Список
Значение @font-familyWindowsMacСемейство
Arial, Helvetica, sans-serifArialArial, Helveticasans-serif
«Arial Black», Gadget, sans-serifArial BlackArial Black, Gadgetsans-serif
«Comic Sans MS», cursiveComic Sans MSComic Sans MS 5cursive
«Courier New», Courier, monospaceCourier NewCourier New, Courier 6monospace
Georgia, serifGeorgia 1Georgiaserif
Impact,Charcoal, sans-serifImpactImpact 5 , Charcoal 6sans-serif
«Lucida Console», Monaco, monospaceLucida ConsoleMonaco 5monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serifLucida Sans UnicodeLucida Grandesans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serifPalatino Linotype, Book Antiqua 3Palatino 6serif
Tahoma, Geneva, sans-serifTahomaGenevasans-serif
«Times New Roman», Times, serifTimes New RomanTimesserif
«Trebuchet MS», Helvetica, sans-serifTrebuchet MS 1Helveticasans-serif
Verdana, Geneva, sans-serifVerdanaVerdana, Genevasans-serif
SymbolSymbol 2Symbol 2
WebdingsWebdings 2Webdings 2
Wingdings, «Zapf Dingbats»Wingdings 2Zapf Dingbats 2
«MS Sans Serif», Geneva, sans-serifMS Sans Serif 4Genevasans-serif
«MS Serif», «New York», serifMS Serif 4New York 6serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включе

danplay.ru

Самый стандартный шрифт. Безопасные шрифты

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts ). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц и его новое свойство @font-face ; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family , облегчающее эту задачу.

Список
Значение @font-familyWindowsMacСемейство
Arial, Helvetica, sans-serifArialArial, Helveticasans-serif
«Arial Black», Gadget, sans-serifArial BlackArial Black, Gadgetsans-serif
«Comic Sans MS», cursiveComic Sans MSComic Sans MS 5cursive
«Courier New», Courier, monospaceCourier NewCourier New, Courier 6monospace
Georgia, serifGeorgia 1Georgiaserif
Impact,Charcoal, sans-serifImpactImpact 5 , Charcoal 6sans-serif
«Lucida Console», Monaco, monospaceLucida ConsoleMonaco 5monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serifLucida Sans UnicodeLucida Grandesans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serifPalatino Linotype, Book Antiqua 3Palatino 6serif
Tahoma, Geneva, sans-serifTahomaGenevasans-serif
«Times New Roman», Times, serifTimes New RomanTimesserif
«Trebuchet MS», Helvetica, sans-serifTrebuchet MS 1Helveticasans-serif
Verdana, Geneva, sans-serifVerdanaVerdana, Genevasans-serif
SymbolSymbol 2Symbol 2
WebdingsWebdings 2Webdings 2
Wingdings, «Zapf Dingbats»Wingdings 2Zapf Dingbats 2
«MS Sans Serif», Geneva, sans-serifMS Sans Serif 4Genevasans-serif
«MS Serif», «New York», serifMS Serif 4New York 6serif

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

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

3 Шрифт Book Antiqua практически идентичен Palatino Linotype; 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-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

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

Скриншоты
  • Mac OS X 10.4.8, Firefox 2.0, ClearType включён (за скриншот спасибо Juris Vecvanags)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType включён
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType включён (за скриншот спасибо Nolan Gladius)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType включён (за скриншот спасибо Eric Zavesky)
  • Windows Vista, Internet Explorer 7, ClearType включён
  • Windows Vista, Firefox 2.0, ClearType включён (за скриншот спасибо Michiel Bijl)

Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов . Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit , были созданы в качестве альтернативы с целью предоставить что-то новое.

Их очень просто использовать. Рассмотрим в качестве прим

offlink.ru

Основные шрифты — Как создать сайт

Безопасные шрифты на примере CSS

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

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

Шрифты в языке CSS, назначаются элементам с помощью свойства font-family.

Список безопасных шрифтов (21 штука) и их примеры:


font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 24 октября 2014


Навигация по записям

gabdrahimov.ru

Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

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

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

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

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

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

Но как же отличить шрифты первой группы от второй? Ясно что на набор шрифтов, установленный непосредственно на твоем компьютере опираться нельзя! Давайте разбираться.

Стандартные шрифты

Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.

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

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:

  1. Имя семейства шрифтов по выбору. Например «Times new Roman», «Arial» и другие. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
  2. Родовое (общее) семейство. В спецификации определены следующие родовые семейства:
    • serif — шрифты с засечками на концах;
    • sans-serif — шрифты без засечек;
    • cursive — шрифты курсивного начертания;
    • fantasy — декоративные шрифты;
    • monospace — моноширинный шрифт(с буквами одинаковой ширины).

Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.

Но не все так просто. Покопаем детальнее.

В поисках Web-безопасных шрифтов

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

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Шрифты поддерживающие кириллицу

Специфической особенностью рунета является проблема с кодировками страниц и поддержкой кириллицы в шрифтах. Чтобы не возникало проблем с разнообразными кодировками символов, умные люди придумали Unicode, который позволяет сочетать в одном шрифте символы нескольких языков. Таким образом для русскоязычных страниц нужно использовать только Unicode шрифты поддерживающие кириллицу.

Ниже приведена таблица соответствий шрифтов.

WindowsMac OSUnix/LinuxРодовое семейство
Arial BlackHelvetica CYNimbus Sans LSans-serif
ArialHelvetica CYNimbus Sans LSans-serif
Comic Sans MSMonaco CY* (см. ниже)cursive
Courier New* (см. ниже)Nimbus Mono LMonospace
Georgia* (см. ниже)Century Schoolbook LSerif
ImpactCharcoal CY* (см. ниже)Sans-serif
Times New RomanTimes CYNimbus Roman No9 LSerif
Trebuchet MSHelvetica CY* (см. ниже)Sans-serif
VerdanaGeneva CYDejaVu SansSans-serif

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

Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:

body { font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; }

body {

font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif;

}

Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.

Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!

До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.

Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.

Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.

Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.

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

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

WindowsMac OSРодовое семейство
Lucida ConsoleMonacoMonospace
Lucida Sans UnicodeLucida GrandeSans-serif
TahomaGeneva CYSans-serif

А если без кириллицы?

Для англоязычных текстов вышеприведенные таблицы имеют несколько другой вид.

WindowsMac OSUnix/LinuxРодовое семейство
Arial BlackGadgetNimbus Sans LSans-serif
ArialHelveticaNimbus Sans LSans-serif
Comic Sans MSMonacoTSCu_Comiccursive
Courier NewCourierNimbus Mono LMonospace
Georgia* (см. ниже)Century Schoolbook LSerif
ImpactCharcoalRekhaSans-serif
Times New RomanTimesNimbus Roman No9 LSerif
Trebuchet MSHelveticaGarudaSans-serif
VerdanaGenevaDejaVu SansSans-serif

Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.

Шрифты, которые не входят в перечень «безопасных», но могут использоваться на макетах, лучше определять шрифтовыми CSS стеками на основе этой таблицы.

WindowsMac OSUnix/LinuxРодовое семейство
Lucida ConsoleMonacoMonospace
Lucida Sans UnicodeLucida GrandeGarudaSans-serif
Palatino LinotypePalatinoGaruda**Sans-serif
TahomaGenevaKalimatiSans-serif

Прочерк в графе Unix/Linux обозначает, что пользователи этих ОС скорее всего увидят на странице шрифт, установленный для отображения страниц по умолчанию.

** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).

Выводы:

  1. Абсолютно безопасных шрифтов не существует. Условно безопасными можно назвать следующие шрифты:
    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Georgia
    • Impact
    • Times New Roman
    • Trebuchet MS
    • Verdana
  2. Безопасные CSS стеки, учитывающие поддержку кирилицы в шрифтах, можно посмотреть в статье Безопасные шрифтовые CSS стеки для рунета.
  3. Если на странице поддержка кириллицы не важна, используем CSS стеки из статьи Безопасные шрифтовые CSS стеки для англоязычных текстов.

Информация была взята с ресурса http://www.xiper.net/

lamp-dev.ru

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

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