Стандартные шрифты для windows 7. Безопасные шрифты. Присваиваем шрифт только параграфам

Шрифты - это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В статье пойдет речь о подключении стандартных шрифтов к 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 был составлен список из нескольких безопасных шрифтов.

  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

Все эти шрифты установлены на 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; } Построчно это выглядит так:
  1. Подлючаем шрифт к параграфам, можно применять к спискам li, блокам div, формам form и другим элементам;
  2. Устанавливаем жирность шрифта, либо вместо 600, ставим значение - bold ;
  3. Дополнительно устанавливаем размер шрифта параграфам.

Что-бы присвоить шрифт только к определенному параграфу , или блоку, нужно сначала в 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"; }

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

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

Выбираете шрифт Open Sans , Droid Serif или Lato . Пишите код и вставляете его в элемент HTML-документа . Все готово, чтобы ссылаться на него в CSS ! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.

Что же может быть не так?

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

Такого не случится, если реализовать резервный вариант.

Насколько важно применение безопасных веб-шрифтов?

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

А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.

Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите , - один из стандартных вариантов. Например, Times New Roman .

Поэтому как на вашем экране текст может выглядеть просто ужасно.

А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows , Mac , Google , а также Unix и Linux .

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

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

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

15 лучших безопасных веб-шрифтов

  1. Arial

Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif » или рубленых шрифтов (у которых нет засечек на кончиках букв ). Его часто используют в Windows для замены других литер.

  1. Helvetica

Helvetica - палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов ).

  1. Times New Roman

Выполняет ту же роль для шрифтов с засечками, что и Arial для тех, что без засечек. Он является одним из самых популярных на Windows-устройствах . Это обновленная версия старого шрифта Times .

  1. Times

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

  1. Courier New

Похож на Times New Roman и применяется в качестве разновидности старой классики. Он также считается моноширинным шрифтом. В отличие от шрифтов с засечками и без, все его знаки имеют одинаковую ширину.

  1. Courier

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

  1. Verdana

Verdana может по праву считаться истинным веб-шрифтом (true web font ) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.

  1. Georgia

Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana . Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman , по сравнению с ним выглядит словно карлик.

  1. Palatino

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

  1. Garamond

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

  1. Bookman

Bookman (или Bookman Old Style ) - один из лучших стандартных шрифтов для заголовков. Его характерная черта - удобочитаемость даже при использовании маленького размера.

  1. Comic Sans MS

Comic Sans MS - забавная альтернатива для шрифтов с засечками.

  1. Trebuchet MS

Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP . Сегодня с его помощью составляют основной текст.

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

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

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

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

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

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-страниц по умолчанию.

Образцы подобных линеек можно увидеть, например, в Dreamweaver.

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

Но мы то теперь знаем, что означает эта строка, не правда ли? И уже можем правильно ее использовать.

Но почему же строка построенная нами так сильно отличается от привычного по Dreamweaver:

Body { font-family: Arial, Helvetica, sans-serif; }

Кроме того, что в таблице учитываются шрифты 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, но и другие шрифты. Все большее количество дизайнеров пользуются этой возможностью и грамотный верстальщик должен об этом знать.

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

Windows Mac OS Родовое семейство
Lucida Console Monaco Monospace
Lucida Sans Unicode Lucida Grande Sans-serif
Tahoma Geneva CY Sans-serif

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

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

Windows Mac OS Unix/Linux Родовое семейство
Arial Black Gadget Nimbus Sans L Sans-serif
Arial Helvetica Nimbus Sans L Sans-serif
Comic Sans MS Monaco TSCu_Comic cursive
Courier New Courier Nimbus Mono L Monospace
Georgia * (см. ниже) Century Schoolbook L Serif
Impact Charcoal Rekha Sans-serif
Times New Roman Times Nimbus Roman No9 L Serif
Trebuchet MS Helvetica Garuda Sans-serif
Verdana Geneva DejaVu Sans Sans-serif

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

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

Windows Mac OS Unix/Linux Родовое семейство
Lucida Console Monaco Monospace
Lucida Sans Unicode Lucida Grande Garuda Sans-serif
Palatino Linotype Palatino Garuda** Sans-serif
Tahoma Geneva Kalimati Sans-serif

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

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

Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации 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).

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

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

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

Любой браузер по умолчанию не загружает и не устанавливает шрифты со сторонних ресурсов. Именно поэтому зачастую возникает проблема «нестандартных» шрифтов. Допустим, веб-мастер решил сделать на сайте какой-либо красивый шрифт, указал его в коде, а у большинства пользователей сайта этот шрифт не установлен в операционной системе.

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

Итак, какой же этот «стандартный набор» шрифтов. Ниже приведён список предустановленных шрифтов операционных систем (подсвечены шрифты, рекомендованные к применению на сайтах):

Название шрифта Win 2000 Win XP Vista Win 7 Win 8
Arial + + + + +
Arial Black + + + + +
Book Antiqua +
Calibri + + +
Cambria + + +
Candara + + +
Comic Sans MS + + + + +
Consolas + + +
Constantia + + +
Corbel + + +
Courier + + + + +
Courier New + + + + +
Estrangelo Edessa + + + +
Franklin Gothic Medium + + + +
Gautami + + + +
Gabriola + +
Georgia + + + + +
Georgia Italic Impact +
Impact + + + + +
Latha + + + +
Lucida Console + + + + +
Lucida Sans Console + + + +
Lucida Sans Unicode + + + + +
Marlett + + + + +
Modern + +
Modern MS Sans Serif +
MS Sans Serif + + + + +
MS Serif + + + + +
MV Boli + + + +
Nyala + + +
Palatino Linotype + + + + +
Roman + + + + +
Script + + + + +
Segoe Print + + +
Segoe Script + + +
Segoe UI + + +
Small Fonts + +
Symbol + + + + +
Tahoma + + + + +
Tempus Sans ITC +
Times New Roman + + + + +
Trebuchet MS + + + + +
Tunga + + + +
Verdana + + + + +
Webdings + + + + +
Westminster +
Wingdings + + + + +

Как выглядят стандартные шрифты.

Windows Vista, Internet Explorer 7, ClearType включен (нажмите на изображение для полноразмерного просмотра)

Windows Vista, Firefox 2.0, ClearType включен (нажмите на изображение для полноразмерного просмотра)

Mac OS X 10.4.8, Firefox 2.0, ClearType включен (нажмите на изображение для полноразмерного просмотра)

Windows 2000, IE 6.0 (нажмите на изображение для полноразмерного просмотра)