Свойства Шрифта.

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

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

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

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

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

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

@font-face {
font-family:Syper Pyper Chrift; /* Присваиваем имя шрифту */
src:url(font/chrift.ttf) /* Путь к шрифту в формате TTF */
}

Ну вот правило создано шрифт загружен и имя у него есть.. Теперь собственно по необходимости можно обращаться к нашему супер пупер шрифту благо Вы это уже умеете.. ну например:

<p style="font-family:Syper Pyper Chrift;">Этот текст использует нестандартный шрифт</p>

А вот пример целиком:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.ttf)
}
p {
white-space: pre;
font-size: 42px;
font-family:Syper Pyper Chrift;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...

А.С. Пушкин</p>
</body>
</html>

смотреть пример

P.S. Для тренировки и экспериментов Вы можете скачать шрифты использованные в примерах.

Что не работает??? да, к сожалению, такой код не будет работать в Internet Explorer и может быть в Опере.. Про IE расскажу чуть ниже, а пока пара слов про Оперу.

Я неспроста употребил и выделил жирным слова "может быть" потому, как браузер Opera действительно может быть отобразит нестандартный шрифт, а может быть не отобразит.. До определённого момента я сам не знал, да и теперь если честно не совсем понимаю, почему так происходит.. на одних компьютерах Opera отображает шрифт на других противится этому, иногда на своём компе всё исправно работает, а с сервера тот же код в том же браузере уже нет! - думал, что это мистика какая-то и не иначе чем глюком Оперы я этот факт не называл, но потом вычитал в Интернете, что шрифт не отображается в тех случаях, когда имя пользователя в Windows или путь к странице написаны кириллицей - такая вот странность браузера.

Теперь про Internet Explorer..

Ну с IE всё как обычно у него всё всегда не "как у людей" причём это уже не какие-то ошибки и глюки а обыкновенный маразм.. Не знаю чем мотивировались разработчики IE защитой авторских прав, маркетинговыми расчётами или же жутким желанием создать монополию, но их браузер вплоть до 9 версии не поддерживал формат шрифта TTF (TrueType) а поддерживал только EOT (Embedded OpenType) - чего соответственно не делает ни один другой браузер..

Поэтому специально для IE нужно дополнительно указывать на аналогичный шрифт (можно и не на аналогичный), в формате EOT.

Вот так:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Подключаем дополнительный шрифт для браузера Internet Explorer</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.eot); /* Специально для IE указываем путь к шрифту в формате EOT */
}
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.ttf); /* А для всех остальных браузеров грузим шрифт в формате TTF */
}
p {
white-space: pre;
font-size: 42px;
font-family:Syper Pyper Chrift;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...

А.С. Пушкин</p>
</body>
</html>

смотреть пример

Теперь этот код будет работать практически везде даже в IE5!!.

Вообще следует отметить, что правило @font-face вошло ещё в спецификацию CSS 2 однако из спецификации CSS 2.1 оно было исключено так как на тот момент не было актуальным.. и вот теперь снова вернулось, войдя в спецификацию CSS 3! Так что правило @font-face будут поддерживать даже сравнительно старенькие браузеры кроме обозначенных выше нюансов.

Аналогичным способом можно подключить шрифты для жирного и курсивного начертания добавив в правило @font-face свойства font-style:italic или font-weight:bold

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
/* шрифт для обычного текста*/
@font-face {
font-family:Graffiti;
src:url(font/graffiti.ttf);
}
/* шрифт для жирного текста */
@font-face {
font-family:Graffiti;
font-weight:bold;
src:url(font/graffiti_bold.ttf);
}
p {
font-size: 42px;
font-family:Graffiti;
text-align: center;
}
</style>
</head>
<body>
<p>Welcome to <b>webremeslo.ru</b> !!</p>
</body>
</html>

смотреть пример

Обратите внимание жирным шрифтом, кстати, он необязательно должен быть именно жирный - может быть и тонкий.. в общем шрифтом который мы определили в качестве жирного выделены те участки кода, которые взяты в тег <b>. А вот если бы мы в правиле @font-face с помощью свойства font-style:italic указали шрифт для курсивного начертания то иным шрифтом выделялся бы текст взятый в тег <i>.

Ну и еще несколько нюансов..

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

Делается это с помощью src:local вот так:

src:local("Syper Pyper Chrift")

Так же можно дополнительно указать формат шрифта с помощью атрибута format вот так:

url(chrift.eot) format("embedded-opentype") /* Для формата EOT */
url(chrift.ttf) format("truetype") /* Для формата TTF */

Вот таблица форматов шрифтов и их расширений на всякий случай:

значения	расширения
"woff"	.woff
"truetype"	.ttf
"opentype"	.ttf, .otf
"embedded-opentype"	.eot
"svg"	.svg, .svgz

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

Мы это уже проходили:

font-family: Syper Pyper Chrift, Verdana, sans-serif;

Ну а все вместе это будет выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.eot);
}
@font-face {
font-family:Syper Pyper Chrift;
src:local("Syper Pyper Chrift"),
url(font/chrift.ttf) format("truetype");
}
p {
white-space: pre;
font-size: 42px;
font-family: Syper Pyper Chrift, Verdana, sans-serif;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...

А.С. Пушкин</p>
</body>
</html>

смотреть пример

Что видно в этом примере?

Во-первых, видно что мы не применяли format и local к той части кода которая предназначена для браузера Internet Explorer по идее IE должен поддерживать эти команды, но на практике же всё происходит иначе.. тоже по каким то мифическим причинам данный браузер то нормально воспринимает format и local то вовсе отказывается загружать шрифт если в коде присутствуют данные команды.

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

Можно указать несколько локальных шрифтов (src: local) с различными именами.

Полезные советы:

Помнится я уже не раз говорил о том, что текст на сайте в первую очередь должен быть удобен тля чтения, а уж потом красив! Так что не злоупотребляйте сильно декоративными шрифтами, конечно, все эти закорючки и загогулины очень красивы, но они весьма затрудняют чтение длинного текста, а порой даже раздражают.
Где скачать одинаковые шрифты "пары" в форматах TTF и EOT?

Такие пары действительно не так уж просто найти в Интернете как и вообще шрифты в формате EOT - ну я относительно конечно.

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

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

P.P.S. А ещё спасибо Александру Сергеевичу Пушкину за стихи..

P.P.P.S. И отдельная благодарность Кириллу и Мефодию за предоставленные буквы!!