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

Верстальщику о шрифтах. Часть I: Безопасные шрифты

Начиная верстать макет, необходимо в частности указать в 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-шрифтов:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

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

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

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

Об этом читайте во второй части публикации:

Материалы:

Источник

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

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

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

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

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

‘Times New Roman’, Times, serif	Съешь же ещё этих мягких французских булок
Georgia, serif	Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
‘Arial Black’, Gadget, sans-serif	Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif	Съешь же ещё этих мягких французских булок
‘Trebuchet MS’, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif	Съешь же ещё этих мягких французских булок
‘Comic Sans MS’, cursive, sans-serif	Съешь же ещё этих мягких французских булок
‘Courier New’, Courier, monospace	Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

Times New Roman

Источник

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

Веб-безопасные шрифты — это шрифты, которые универсально устанавливаются во всех браузерах и устройствах.

Резервные шрифты

Тем не менее, нет 100% полностью веб-безопасных шрифтов. Всегда есть вероятность, что шрифт не найден или установлен неправильно.

Поэтому очень важно всегда использовать резервные шрифты.

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

Пример

Здесь есть три типа шрифтов: Tahoma, Verdana и sans-serif. Второй и третий шрифты являются резервными копиями, на случай, если первый не найден.

Лучшие веб-безопасные шрифты для HTML и CSS

Ниже приведен список лучших веб-безопасных шрифтов для HTML и CSS:

• Arial (без засечек)
• Verdana (без засечек)
• Tahoma (без засечек)
• Helvetica (без засечек)
• Trebuchet MS (без засечек)
• Times New Roman (с засечками)
• Georgia (с засечками)
• Garamond (с засечками)
• Courier New (моноширинный)
• Brush Script MT (рукописный)

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

Arial (sans-serif)

Arial — наиболее широко используемый шрифт как для онлайн, так и для печатных СМИ. Arial также является шрифтом по умолчанию в Google Docs.

Arial — один из самых безопасных веб-шрифтов, и он доступен во всех основных операционных системах.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Verdana (sans-serif)

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

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Helvetica (sans-serif)

Helvetica — шрифт любят дизайнеры. Подходит для многих видов бизнеса.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Tahoma (sans-serif)

Tahoma — шрифт имеет меньше пространства между символами.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Trebuchet MS (sans-serif)

Trebuchet MS — был разработан Microsoft в 1996 году. Используйте этот шрифт осторожно. Не поддерживается всеми мобильными операционными системами.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Times New Roman (serif)

Times New Roman — один из самых узнаваемых шрифтов в мире. Он выглядит профессионально и используется во многих газетах и «новостных» сайтах. Это также основной шрифт для устройств и приложений Windows.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Georgia (serif)

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

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Garamond (serif)

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

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Courier New (monospace)

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

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Brush Script MT (cursive)

Шрифт Brush Script MT — был разработан для имитации рукописного ввода. Это элегантно и утонченно, но может быть трудно читать. Используйте его осторожно.

Пример

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Совет: Также проверьте все доступные Google Шрифты и как их использовать.

Источник

Безопасные (стандартные, системные) шрифты для верстки

HTML, CSS

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

Стоит заметить что абсолютно 100% поддерживающихся шрифтов во всех ОС не существует, тем не менее, есть список «безопасных» шрифтов, основой для которого послужили шрифты из ОС Windows, которые присутствуют и в других операционных системах. Далее в статье представлены наборы шрифтов, с указанием семейства в конце.

Разберем как работает инструкция по заданию шрифта на примере следующего значения:

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

Здесь задается шрифт «Times New Roman» , так как название состоит из нескольких слов, то оно берется в кавычки. Если шрифт «Times New Roman» в системе отсутствует, то будет применен шрифт Times , если же и он отсутствует, то система применит любой шрифт из семейства serif .

Шрифты с засечками — 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

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

Источник