Свойства шрифта: @font-face

@font-face

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 4.0 3.5 4.0 10.0 3.1
Мобильные браузеры Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 1.0 10 10 4.3
Свойство
@font-face — при помощи этого свойства подключаются шрифты к документу
Описание
Представим такую ситуацию: есть какой-то текстовый контент которому необходимо придать особенный вид при помощи шрифта. Но что если стандартные шрифты не подходят? На помощь приходит свойство @font-face которое позволяет подключать необходимые шрифты к документу. К тому же это свойство позволяет подключить шрифт к документу не устанавливая его на компьютер, достаточно просто залить шрифт на сервер и указать относительный или абсолютный путь к нему.
Где брать шрифты ?
Сайт www.fontsquirrel.com предоставляет целлую коллекцию шрифтов с открытым исходным кодом которые можно использовать в коммерческих целях.
Есть сервис www.google.com/webfonts который тоже предоставляет шрифты с открытым исходным кодом.
Правила записи

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

@font-face {

    font-family: 'NameFont';

    src: url('font.eot');

    src: url('font.eot?#iefix') format('embedded-opentype'),

    url('font.woff') format('woff'),

    url('font.ttf') format('truetype'),

    url('font.svg#svgNameFont') format('svg');

}

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

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

p { font-family: 'NameFont'; }

Если не хочется хранить шрифты и занимать место на сервере, то можно воспользоваться сервисом Google Web Fonts, шрифт в таком случае присоединяется к документу при помощи тега link:

<link href='http://fonts.googleapis.com/css?family=имя_шрифта' rel='stylesheet'>

Далее указываем в правиле имя шрифта: body { font-family: имя_шрифта; }

Примеры
@font-face
font-family: '1942_report1942_report'; 
src: url('1942-webfont.eot'); 
src: url('1942-webfont.eot?#iefix') format('embedded-opentype'), 
url('1942-webfont.woff') format('woff'), 
url('1942-webfont.ttf') format('truetype'), 
url('1942-webfont.svg#1942_report1942_report') format('svg'); 
}
war… war never changes…
Поделиться