Использование @font-fase

Как мы все знаем, шрифты – очень важная часть дизайна. Текст должен быть привлекательным. Есть много решений, какие позволяют добавлять на сайт нестандартные шрифты. Можно использовать Cufón , sIFR и т.д. Но одним из лучших вариантов является использование @font-fase в CSS. В этом уроке мы разберем, как использовать @font-fase в CSS.

Что такое @font-fase?

CSS правило @font-fase позволяет ссылаться дизайнеру на шрифт, если шрифта нет на компьютере пользователя. Используя @font-fase мы предотвращаем использование дополнительных зависимостей при использовании других методов, таких как Cufón, sIFR и т.д.

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

Зачем использовать @font-fase?

Правило @font-fase, не требует использовать дополнительные функции и подключать дополнительные файлы. Другие технологии, такие как Cufón и sIFR полагаются на JavaScript и Flash..

В настоящее время @font-fase поддерживается браузерами: Firefox 3.5 + (я слышал, 3,1 +), Safari 3.1 +, Opera 10 и Internet Explorer 4 +.

Хотя многие пользователи интернет не имеют поддержку @font-fase, потому что они получают другой шрифт. Кроме того, пользователи браузеров Firefox, Safari и Opera обновляют свои браузеры гораздо чаще, чем пользователи Internet Explorer.

Использование @font-fase

Правило использования @font-fase довольно простое. Мы свяжем фрифт(ы) и укажем формат и стиль. Затем можно использовать его для элементов, каких Вы хотите.

				@font-face {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Regular.ttf)  format("truetype");
				}
			      
				@font-face {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Italic.ttf)  format("truetype");
					font-style: italic;
				}
			      
				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Bold.ttf)  format("truetype");
					font-weight: bold;
				}
			      
				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-BoldItalic.ttf)  format("truetype");
					font-weight: bold;
					font-style: italic;
				}
			      
				h3 { 
					font-weight: normal; 
				}
				h3.droid {  
					font-family: "Droid Serif", serif; 
				}
				

@font-fase форматы шрифта

Вы можете использовать OpenType (“opentype”, .otf) и TrueType (“truetype”, .ttf) в Firefox, Safari, Opera и Chrome, но не в Internet Explorer. Мы должны указать отдельные правила для IE.

Использование @font-fase в Internet Explorer

Хотя Internet Explorer один из первых, который начал использовать правило @font-fase, но они используют более нестандартный формат (Embedded OpenType, .eot). Таким образом нам необходимо определить @font-fase правило для других основных браузеров и отдельно для IE.

				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Regular.eot);
				}
			      
				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Italic.eot);
					font-style: italic;
				}
			      
				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-Bold.eot);
					font-weight: bold;
				}
			      
				@font-face  {
					font-family: "Droid  Serif";
					src: url(DroidSerif-BoldItalic.eot);
					font-weight: bold;
					font-style: italic;
				}
				/ * Другие основные правила браузера идут после IE правил * /
				

Вот оно использование нестандартных шрифтов на страницах сайта. И самое главное мы не будем использовать дополнительно ни JavaScript, ни Flash.

Преобразование в EOT Шрифты

Если у Вас есть шрифт который можно использовать с @font-fase, но он имеет формат rueType (.ttf) или OpentType (.otf), не бойся. Они могут быть преобразованы.

Также существует небольшая утилита, называемая ttf2eot, что является довольно простой в использовании.

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

http://ttf2eot.sebastiankippe.com http://www.cuvou.com/wizards/ttf2eot.cgi

Если Вы хотите конвертировать с OTF в TTF, необходимо использовать FontForge.

Вы также можете использовать преобразователь http://onlinefontconverter.com

Дополнительные ресурсы

Если Вы ищите место, где можно скачать шрифты, я вам эти места подскажу:

Font Squirrel @font-face Kits Webfonts.info @font-face embedding dafont.com

Если у Вас есть еще какие-то ресурсы, пожалуйста, поделитесь ими в комментариях.