Все или не все, но нужное. Или как была найдена чертова дюжина шрифтов.

С установкой ОС Windows XP в систему устанавливается небольшой набор шрифтов. Их можно увидеть в папке c:/Windows/fonts или открыв Пуск: Настройка: Панель управления: Шрифты.

Это было вводное слово для новичков :)   Со временем устанавливая доп. программы, в частности MS Office, количество шрифтов увеличивается.

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

Список шрифтов устанавливаемых по умолчанию в ОС Windows XP. Сделан на основе чистой XP SP2.

# Шрифт Семейство Кририлица Латиница
1 Arial sans-serif
Короткий текст для примера.
Small text portion for example.
2 Arial Black sans-serif
Короткий текст для примера.
Small text portion for example.
3 Comic Sans MS cursive
Короткий текст для примера.
Small text portion for example.
4 Courier New monospace
Короткий текст для примера.
Small text portion for example.
5 Estrangelo Edessa
Короткий текст для примера.
Small text portion for example.
6 Franklin Gothic Medium sans-serif
Короткий текст для примера.
Small text portion for example.
7 Gautami
Короткий текст для примера.
Small text portion for example.
8 Georgia serif
Короткий текст для примера.
Small text portion for example.
9 Impact sans-serif
Короткий текст для примера.
Small text portion for example.
10 Kartika
Короткий текст для примера.
Small text portion for example.
11 Latha
Короткий текст для примера.
Small text portion for example.
12 Lucida Console monospace
Короткий текст для примера.
Small text portion for example.
13 Lucida Sans Unicode sans-serif
Короткий текст для примера.
Small text portion for example.
14 Mangal
Короткий текст для примера.
Small text portion for example.
15 Microsoft Sans Serif sans-serif
Короткий текст для примера.
Small text portion for example.
16 Modern
Короткий текст для примера.
Small text portion for example.
17 Mv Boli
Короткий текст для примера.
Small text portion for example.
18 Palatino Linotype serif
Короткий текст для примера.
Small text portion for example.
19 Raavi
Короткий текст для примера.
Small text portion for example.
20 Roman
Короткий текст для примера.
Small text portion for example.
21 Script
Короткий текст для примера.
Small text portion for example.
22 Shruti
Короткий текст для примера.
Small text portion for example.
23 Sylfaen serif
Короткий текст для примера.
Small text portion for example.
24 Symbol
Короткий текст для примера.
Small text portion for example.
25 Tahoma sans-serif
Короткий текст для примера.
Small text portion for example.
26 Times New Roman serif
Короткий текст для примера.
Small text portion for example.
27 Trebuchet MS sans-serif
Короткий текст для примера.
Small text portion for example.
28 Tunga
Короткий текст для примера.
Small text portion for example.
29 Verdana sans-serif
Короткий текст для примера.
Small text portion for example.
30 Vrinda
Короткий текст для примера.
Small text portion for example.
31 Webdings
Короткий текст для примера.
Small text portion for example.
32 WingDings
Короткий текст для примера.
Small text portion for example.

Как видим 32 шрифта типа TrueType - это немало. Однако колонка с русским текстом во многих случаях не сильно отличается. На то есть причины. Такое происходит потому, что броузер подменяет их другими шрифтами, так как эти не содержат кириллического набора символов. Это шрифты предназначенные для других языков или символические (содержат специальные орнаменты). Как видно ниже, строка “Название шрифта” идентична, хотя каждой прописан разный шрифт.

Шрифты предназначенные для определенных языков и не содержат кириллицы:

  1. Название шрифта: “Estrangelo Edessa” - Syriac
  2. Название шрифта: “Kartika” - Malayalam
  3. Название шрифта: “Gautami” - Telugu
  4. Название шрифта: “Latha” - Tamil
  5. Название шрифта: “Mangal” - Devanagari
  6. Название шрифта: “MV Boli” - Thaana
  7. Название шрифта: “Raavi” - Gurmukhi
  8. Название шрифта: “Shruti” - Gujarati
  9. Название шрифта: “Tunga” - Kannada
  10. Название шрифта: “Vrinda” - Bengali

Просто не содержат кириллицы:

  1. Modern
  2. Roman
  3. Script

Символические шрифты:

  1. Symbol
  2. Webdings
  3. WingDings

Интересно отметить что в IE и Google Chrome отображаются символические ширифты такие как Symbol, Webdings и WingDings, ни OPERA ни FF ни Safari их не отображает. Но невелика потеря.

Чтож наш список кандидатов уменьшается на 16 шрифтов. Остается также 16.

# Шрифт Семейство ОС Кририлица Латиница
1 Arial sans-serif XP, Mac
Короткий текст для примера.
Small text portion for example.
2 Arial Black sans-serif XP, Mac
Короткий текст для примера.
Small text portion for example.
3 Comic Sans MS cursive XP, Mac
Короткий текст для примера.
Small text portion for example.
4 Courier New monospace XP, Mac
Короткий текст для примера.
Small text portion for example.
5 Franklin Gothic Medium sans-serif XP
Короткий текст для примера.
Small text portion for example.
6 Georgia serif XP, Mac
Короткий текст для примера.
Small text portion for example.
7 Impact sans-serif XP, Mac
Короткий текст для примера.
Small text portion for example.
8 Lucida Console monospace XP
Короткий текст для примера.
Small text portion for example.
9 Lucida Sans Unicode sans-serif XP
Короткий текст для примера.
Small text portion for example.
10 Microsoft Sans Serif sans-serif XP
Короткий текст для примера.
Small text portion for example.
11 Palatino Linotype serif XP
Короткий текст для примера.
Small text portion for example.
12 Sylfaen serif XP
Короткий текст для примера.
Small text portion for example.
13 Tahoma sans-serif XP
Короткий текст для примера.
Small text portion for example.
14 Times New Roman serif XP
Короткий текст для примера.
Small text portion for example.
15 Trebuchet MS sans-serif XP
Короткий текст для примера.
Small text portion for example.
16 Verdana sans-serif XP, Mac
Короткий текст для примера.
Small text portion for example.

Следует отметить еще два растровых шрифта, которые есть в стандартной поставке. Их особенность в том что они не масштабируются, а имеют фиксированные размеры: 8, 10, 12, 14, 18 и 24 Также они имеют проблемы с отображением в некоторых броузерах: Opera не показывает в них кириллицу, хотя показывает латиницу. А Safari и Google Chrome не показывают ни кириллицу не латиницу.

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

# Шрифт Семейство ОС Кририлица Латиница
1 MS Sans Serif sans-serif XP
Короткий текст для примера.
Small text portion for example.
2 MS Serif serif XP
Короткий текст для примера.
Small text portion for example.

Если вы не вкурсе, значения семейств:

serif Шрифт с засечками
sans-serif Без засечек
cursive курсив
monospace моноширный (каждая буква одинаковой ширины)

Еще существует такое семейство как “fantasy”, но оно не входит в список web-safe шрифтов.

Итак все, что мы имеем в голом Windows исключая ненадежные растровые шрифты, которые к тому же малоинтересны, это 16 шрифтов:

9 без засечек,
4 с засечками,
2 моноширных,
1 курсивный.

Book Antiqua
- распространенный шрифт, но не входит список дефолтных шрифтов. Ставится с MS Office. Очень похож на Palatino Linotype.

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

Список доступных для Windows и Mac OS шрифтов в написании для CSS

font-family: Arial, Helvetica, sans-serif

font-family: “Arial Black”, Gadget, sans-serif

font-family: “Comic Sans MS”, cursive

font-family: “Courier New”, Courier, monospace

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: “Palatino Linotype”, “Book Antiqua”, Palatino, 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: “MS Sans Serif”, Geneva, sans-serif

font-family: “MS Serif”, “New York”, serif

Итак, не считая растровых, имеем 13 шрифтов. Я не нашел соответствующих в Mac OS для
Franklin Gothic Medium, Sylfaen и Microsoft Sans Serif.

PS. Очень показательная и полезная таблица распространенности шрифтов в различных операционках на 2009 год. Здесь начало.

PPS. Просмтривая этот пост в разных броузерах, можно увидеть разницу в возможностях броузеров и сделать соответствующие выводы.

В этой статье можно посмотреть наглядно на каждый из этих шрифтов в действии.

Особенности Юникодовых шрифтов.

Известный баг в шрифте Verdana делает его не лучшим выбором при написании текстов с диакритическими знаками.  Так как сами эти знаки, согласно багу, смещаются на следующий символ (Если верить википедии :) )

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

1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.91 out of 5)
Loading ... Loading ...