Подключение нестандартных шрифтов. Часть вторая

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

Существует два таких способа: использовать уникальный font-family для каждого начертания и применение font-weight\font-style.

§Уникальный font-family

Примером этому служит известный сервис fontsquirrel.com, который генерирует вот такие наборы:

@font-face {
    font-family: 'droid_serifregular';
    src: url('droidserif-regular.eot');
    src: url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

p{
    font-family: 'droid_serifregular';
}

i{
    font-family: 'droid_serifitalic';
}

Насколько это удобно — пусть каждый решает сам. Нас в этом случае интересует совсем другая проблема — проблема «псевдо-жирного» и «псевдо-италика». Об этом уже писали на css-live, мы остановимся на ключевых моментах.

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

Примеры:

Слева показана работа браузера, справа оригинальные начертания

Такие ситуации могут возникать, когда в параграфе с droid_serifregular появляется текст в тегах <b></b> и <i></i>, или в том случае, когда селектор унаследует italic или bold от своего родителя. Избежать этого можно, если заранее задавать тегам и всем селекторам, где используются эти начертания, соответствующие font-family.

§Применение font-weight\font-style

Весь фокус подхода в том, что для начертаний задается одинаковый font-family, но разные сочетания свойств. Пример font-face:

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-regular.eot');
    src: url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-italic.eot');
    src: url('droidserif-italic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-italic.woff') format('woff'),
         url('droidserif-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

По сути, указывая значения для font-weight и font-style, мы создаем «ключ», по которому браузер будет искать нужный файл для указанного в селекторе начертания.

Например:

p{
    font-family: 'Droid Serif';
    font-weight: normal;
    font-style: normal;
}

и

p{
    font-family: 'Droid Serif';
    font-weight: normal;
    font-style: italic;
}

Встречая «ключ», браузер по нему обратится к font-face с соответствтующими значениями и применит нужный файл. Таким образом, в первом случае будет выведено начертание regular, а во втором italic. Этот способ более универсален и исключает ситуации с псевдоначертаниями. Кроме того, font-family можно задать единожды для всего документа или блока, а внутри него уже управлять свойствами или отдать все на откуп тегам.

§На заметку

 

исходное значениеbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

§Недостатки способов

Как подметили выше, применять уникальный font-family можно, но в этом случае надо продумать все варианты использования начертаний на странице, учесть наследование свойств и применение тегов.

Проблема второго способа — невозможность задать в IE <=8 больше четырех «ключей» для одного font-family.

§Итого

Исходя из всех плюсов и минусов, мы пришли к выводу, что использование «ключей» наиболее предсказуемый и правильный вариант подключения шрифта. Проблемой в старых IE можно пренебречь. Все же ситуации, когда надо использовать много начертаний, встречаются редко. А в случае, когда это необходимо, использовать первый вариант. Результирующий, кроссбраузерный font-face для четырех начертаний выглядит так:

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-regular.eot');
    src: local('Droid Serif'), local('DroidSerif'), 
         url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-bold.eot');
    src: local('Droid Serif Bold'), local('DroidSerif-Bold'), 
         url('droidserif-bold.eot?#iefix') format('embedded-opentype'),
         url('droidserif-bold.woff') format('woff'),
         url('droidserif-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-italic.eot');
    src: local('Droid Serif Italic'), local('DroidSerif-Italic'), 
         url('droidserif-italic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-italic.woff') format('woff'),
         url('droidserif-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-bolditalic.eot');
    src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), 
         url('droidserif-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-bolditalic.woff') format('woff'),
         url('droidserif-bolditalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

Комментарии

comments powered by Disqus