Сейчас стало модно использовать свои дизайнерские шрифты на сайте. Раньше дизеры лили кровавые слезы, когда верстальщик им говорил, что шрифт, который применен в макете нельзя использовать на страничке. Или того хуже, у верстальщика тоже был установлен шрифт, и жили они с дизером в счастливом неведении, пока в однажды не пришли к заказчику и не открыли сайт на его компьютере.
Стандартом подключения шрифта является такая конструкция:
@font-face {
font-family: "B52"; /*название шрифта, которое будем использовать в дальнейшем*/
src: url("fonts/B52.ttf");
}
body { font-family: "B52" } /* используем загруженный ранеее шрифт*/
Все бы ничего, однако не все браузеры дружат с ttf. Проблема кроссбраузерности одна из ключевых в сегодняшнем вебе. Поэтому шрифты нужно подключать грамотно. В различных форматах. Как это сделать?
Для начала надо конвертировать исходный шрифт в различные форматы, а затем подключить их все. Благо online сервисов конвертации хватает. К примеру font2web или более профессиональный font-face Generator. Первый не предлагает никаких настроек, вы даете ему шрифт, а он выдает готовые css файл и набор шрифтов в различных форматах. Во втором есть куча настроек, но я понятия не имею для чего они нужны =) По опыту скажу, что font2web съел мой шрифт, от которого ffgenerator отрекся, как от безнадежно больного.
Если дизер не предоставил Вам шрифт, но он установлен на Вашем компьютере то взять его можно тут C:\Windows\Fonts, где буква C это тот раздел, где у Вас установлена ОС. Однако если дизайнер применил какие-то новые авторские шрифты, то попросите его предоставить их вместе с макетом ( Сам .psd файл не содержит шрифтов)
В результате font2web выдал мне zip архив c таким css:
/** Generated by FG **/
@font-face {
font-family: 'Conv_B52_____';
src: url('fonts/B52_____.eot');
src: local('☺'), url('fonts/B52_____.woff') format('woff'), url('fonts/B52_____.ttf') format('truetype'), url('fonts/B52_____.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Закинув папку fonts из того же архива на сайт, а в своей страничке уже можно будет применять шрифт Conv_B52_____. Вот такие дела
<link href="examples/fonts.css" rel="stylesheet" type="text/css" /> <p style="font-family:Conv_B52_____; font-size:150%;"> Теперь дизер и верстальщик могут спать спокойно.</p> <p>
Теперь дизер и верстальщик могут спать спокойно.
Теперь сайт сам по себе уникален, имеет свое лицо, однако пользователи не спешат остаться на нем. Возможно, с ним что-то не так в плане юзабилити. Сервис http://sitepolice.ru/e-store/audit-saita/ позволит произвести качественный аудит сайта, для последующей его раскрутки.
Комментарии