Backend-программист
0,0
рейтинг
28 августа 2009 в 10:14

Разработка → Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты перевод

CSS*

Введение


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

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

Также Вам может быть интересен список шрифтов, включённых в каждую версию Windows.

Список


Значение @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 MS5 cursive
"Courier New", Courier, monospace Courier New Courier New, Courier6 monospace
Georgia, serif Georgia1 Georgia serif
Impact,Charcoal, sans-serif Impact Impact5, Charcoal6 sans-serif
"Lucida Console", Monaco, monospace Lucida Console Monaco5 monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Lucida Grande sans-serif
"Palatino Linotype", "Book Antiqua", Palatino, serif Palatino Linotype, Book Antiqua3 Palatino6 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 MS1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol2 Symbol2 -
Webdings Webdings2 Webdings2 -
Wingdings, "Zapf Dingbats" Wingdings2 Zapf Dingbats2 -
"MS Sans Serif", Geneva, sans-serif MS Sans Serif4 Geneva sans-serif
"MS Serif", "New York", 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 только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

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


Скриншоты




Несколько примеров из скриншотов (по одному на каждую операционную систему)


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

image

Windows Vista, Internet Explorer 7, ClearType включён

image

Windows XP, Internet Explorer 6, ClearType включён

image

Windows 2000, Internet Explorer 6, Сглажмвание шрифтов включёно

image

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

image

Прим. переводчика: статью пришлось немного переделать, т.к. Хабр не разрешает добавлять собственные стили к тексту :(
Перевод: Alberto Martinez Perez
Вадим @WASD42
карма
86,2
рейтинг 0,0
Backend-программист
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (24)

  • +5
    Пригодится в качестве справочной информации
  • –5
    копирайты забыл
    • +4
      Смотрим название (где ясно видно, что это перевод) и подвал статьи, где явно указан автор и дана ссылка на источник.
  • +2
    вы про arial narrow забыли (+его дизайнеры часто юзают в своих дизайнах). Он есть и в маке и в винде. Правда под линуксом нету:(
    • +2
      Это не я забыл, это перевод :) Если есть дополнения — с удовольствием дополню статью. В частности, к какому семейству относится шрифт и чем его можно заменить в Линуксе?
      • 0
        arial narrow является разновидностью arial`а (немного жирнее и больше). Его можно вполне заменить эриалом. Только нужно не забывать проверять как будет верстка выглядеть без arial narrow на машине (например если использовать его в горизонтальном меню, то оно запросто может поломаться)
        • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          А начертание Arial, что вы упоминаете («немного жирнее и больше»), называется Black.
    • 0
      Arial Narrow в Windows XP появляется только после установки Microsoft Office. Вообще, шрифт так себе
  • +2
    На скрине с Ubunt'ой многих шрифтов просто нету. Например Trebuchet, Tahoma, Lucida Sans Unicode одинаковы. Очень похожи (возможно тоже одинаковы) MS Sans Serif и Comic Sans MS. Наталкивает на мысль о неустановленном core-fonts (или как он в убунте называется).
    • +1
      Еще подсказали, что Verdan'ы тоже нет.
    • +1
      Думаю, что в этом случае может помочь что-нибудь типа sudo apt-get install msttcorefonts. По-моему линукс слишком специфическая ОС, чтобы оптимизировать под них сайты (пока ещё). Начертание, конечно, меняется в Линуксе, но вроде бы не слишком координально.
      • 0
        Кардинально, координаты.
  • +2
    ОГРОМНОЕ СПОСИБИЩЕ очень полезная информация, особенно для начинающих веб дизайнеров.
  • –3
    Вот прекрасный перевод, в котором, однако, надобно заменить «@font-family» на «font-family» в двух местах, чтобы повернее получалося.
  • 0
    Спасибо, очень полезная ссылка, всегда путался со шрифтами
  • +1
    У линукса сглаживание шрифтов зачетное.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Если дизайнеру приходится объяснять какие шрифты в его распоряжении, то может нах такого дизайнера?
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    must have, начинающим (коим являюсь) в избранное… мало что могу добавить кроме как благодарность вам в карму и огромное человеческое спасибо.
  • 0
    Очень полезный пост, спасибо!
  • 0
    чета Trebuchet MS в убунте выглядит не как настоящий Trebuchet MS из mscorefonts. Ещё не пойму почему везде 2 разных Helvetica и в половине случаев с разным рендерингом?

    Имхо, совсем неаккуратные скрины.
    • –1
      В предыдущих комментариях этот вопрос уже поднимался — в скрине с Убунту не установлены шрифты. Но в статья и не ставила целью найти подходящую замену для ОС Linux.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.