« XHTML2 против HTML5
Вертикальное выравнивание в div’ах »

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

Автор: Cake_Seller

Перевод статьи «Common fonts to all versions of Windows & Mac equivalents» (Основные шрифты всех версий Windows и их эквиваленты на Mac’ах). Перевел Cake_Seller.

Резюме: эта тема уже не новая. В статье рассказывается о том, какие шрифты выбрать, чтобы у пользователя не было проблем с их отображением в разных браузерах и разных операционных системах. Статья содержит таблицу так называемых “безопасных шрифтов”, а также примеры отображения этих шрифтов в разных системах.

Далее курсивом примечания переводчика.

Введение

Ниже вы найдете список со стандартным набором шрифтов для всех версий Windows и их аналоги для Mac’ов. Эти шрифты иногда называют “безопасные шрифты браузеров”. Этот список шрифтов я используя при создании веб страниц и я думаю вы тоже найдете его полезным.

Если вы новичок в веб разработке, то возможно вы подумаете: “Зачем я должен ограничивать себя таким маленьким набором шрифтов? Ведь у меня большая коллекция красивых шрифтов на компьютере”. Более опытные дизайнеры знают, что браузер может отображать только те шрифты, которые установлены на компьютере на котором просматривается страница. Это означает, что каждый посетитель вашей страницы обязан иметь на своем компьютере те шрифты, которые вы хотите использовать. Безусловно, у разных людей установлен разный набор шрифтов, и поэтому возникает потребность в стандартном наборе шрифтов. К счастью, CSS позволяет установить несколько значений для свойства font-family, что немного упрощает задание.

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

Список

  • Серым цветом выделено семейство каждого шрифта.
  • В некоторых случаях эквивалентом для Mac’ов будет являться тот же шрифт, так как Mac OS X также включает некоторые из шрифтов поставляемых с Windows.
  • Сноски снизу содержат специфическую информацию о некоторых шрифтах.
Шрифты Windows / Шрифты Mac / Семейство шрифта
Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif

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, но только при условии, что font-style будет иметь значение normal, а не bold или italic. У остальных браузеров под Mac OS не было замечено проблемы с отображением шрифтов с нестандартным стилем (за эту подсказку благодарим Christian’а Fecteau).

6 Эти шрифты присутствуют в Mac OS X только если установлен Classic (чесно говоря не имею понятия что такое Classic; возможно имелась ввиду стандартная установка Mac OS X).

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

Как выглядят шрифты в разных операционных системах и в разных браузерах

Помните, что в то время как сглаживание ClearType всегда включено, базовое сглаживание шрифта в Windows 98/2000/XP работает только при определенных размерах шрифта. Эти размеры могут быть заданы разработчиком шрифта, но чаще всего эти размеры находятся в пределах 0-6 и после 14 pt.

Опубликовано 06.03.2008 в 05:56 в рубриках: Веб разработка.

Отзывов (9) на «Безопасные шрифты»

  1. X-WoL в 13.11.2008 at 13:41

    Спасибо за статью (и за саму статью и за её перевод)
    Оказалась очень полезной!

  2. Адрей в 28.11.2008 at 15:43

    Большое спасибо! Если бы не статья наш сайт, на маках, был бы страшнее атомной войны! ;)

  3. Оксана в 16.01.2009 at 20:24

    Подскажите пожалуйста, как быть с таким шрифтом: Monotype Corsiva ? Буден ли он вообще где-нибудь виден, кроме конструктора? :)

  4. Cake_Seller в 16.01.2009 at 23:39

    2 Оксана
    В стандартном наборе шрифтов Windows этого шрифта нет. Это означает, что он будет отображаться только на тех компьютерах, на которых этот шрифт установлен отдельно.
    Этот шрифт входит в набор шрифтов Photoshop’а. Это означает что если у пользователя установлен фотошоп, то этот шрифт будет отображаться в браузере.
    Также шрифты могут идти в комплекте с некоторыми другими приложениями (например MS Office).
    Так что про Monotype Corsiva можно забыть. Конечно написать так:

    font-family: "Monotype Corsiva", "Bookman Old Style", "Book Antiqua", serif;

    В этом случае браузер сначал попробует отобразить текст шрифтом Monotype Corsiva. Если такой шрифт он не найдёт в системе, то следующим попробудет отобразить Bookman Old Style. Если и этот шрифт не найдется, то будет пробовать отобразить текст Book Antiqua‘ой. В итоге, если не один из шрифтов не буден найден, то текст будет отображен любым шрифтом с засечками.

  5. Оксана в 17.01.2009 at 15:59

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

  6. Cake_Seller в 17.01.2009 at 18:22

    Лично я чаще всего для отображения основного текста использую Tahoma размером 13px.

    Для заголовков хорошо использовать Tahoma начиная от 18px. Начиная с 18-ти пикселей этот шрифт начинает сглаживаться во всех браузерах под Windows XP (если использовать этот шрифт размером меньше 18px, то сглаживаться он будет только в IE6-7 и в Safari).

    По поводу шрифтов с засечками я с вами на соглашусь. Например, шрифт Georgia мне очень даже нравиться. Для примера посмотрите как он смотрится на сайте I Love Typography. По моему очень даже ничего!

  7. Оксана в 18.01.2009 at 02:59

    Спасибо!Я Вас ещё не замучала? А что Вы скажете по поводу этих шрифтов: Comic Sans MS , Courier New , Verdana ? А Georgia на английском смотрится здорово, а вот на русском не очень…
    Заранее благодарю! Ну очень нужен ответ…

  8. Cake_Seller в 09.03.2009 at 21:26

    Здравствуйте, Оксана. Видимо уже поздно отвечать, но я только наткнулся на ваш комментарий (почему-то не пришло уведомление на мыло о новом комментарии).

    Comic Sans MS — честно говоря не припомню, чтоб встречал чтоб этот шрифт использовался на каком либо-сайте (по-крайней мере в качестве основного шрифта — точно не видел). То, на сколько шрифт хорошо будет смотреться — зависит от контекста (дизайна) в котором он применяется. Шрифт — это элемент дизайна сайта и плохо подобранный шрифт может значительно подпортить общее впечатление от увиденного. В качестве основного шрифта для текста мне тяжело представить этот шрифт (но это не говорит о том, что его нельзя использовать как основной).

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

    Verdana — в качестве основного текста используется довольно часто (в частности на всеми любимом Хабре).

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

  9. Анна в 18.12.2009 at 18:21

    а еще подскажите, пожалуйста – если стандартный шрифт из вышеприведенного списка изменять, добавлять эффекты (например, уменьшить ширину букв до 80%, ну и свечения разные добавить) – как он будет вести себя? можно так делать?

Оставьте свой комментарий