Дизайнерские шрифты на сайте.
Частенько веб-мастерам достаются довольно нетривиальные задачи, которые им подсовывают чудо-дизайнеры.
Одна из проблем это использование необычных шрифтов. Для тех кто не в теме поясню: браузер это не фотошоп и не иллюстратор, поэтому поддержка различных шрифтов в нем изначально особо не предусмотрена, оно и понятно, ибо далеко не факт, что у пользователя, который просматривает ваш сайт есть установленный в системе какой-нибудь English Gothic. Поэтому веб-мастера настоятельно не рекомендуют использовать нестандартные шрифты.
Тем не менее это ограничение можно обойти. И в помощь бедным верстальщикам приходит директива @font-face. Эта директива позволяет браузеру более тонко прочувствовать весь творческий полет веб-дизайнера, так как с ее помощью можно напрямую указать какой шрифт в каждом конкретном случае использовать и, что немаловажно, откуда его можно скачать. Например возьмем шрифт ZapFinof:
@font-face {
font-family: ‘zap’;
src: url(//:) format(‘no404′), url(‘zapfinof-webfont.woff’) format(‘woff’), url(‘zapfinof-webfont.ttf’) format(‘truetype’), url(‘zapfinof-webfont.svg#webfontmJezSn3i’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Обратите внимание на свойство {src:} как раз тут ваш браузер и узнает откуда взять «тот самый» чудо шрифт, который применил дизайнер и утвердил (несмотря на все уговоры разработчиков) заказчик.
Почему веб-мастера не рекомендуют использовать это решение?
Все дело в том, что при таком подходе сайт, конечно, выглядит лучше, но нагрузка на клиентские машины, трафик, нагрузка на сервер и вполне вероятно на кошелек заказчика возрастает. Все связано именно с тем, что браузер каждый раз при загрузке страницы будет скачивать указанные в директиве @font-face шрифты. Да немножко, да при хорошей полосе пропускания незаметно, и страницу браузер вроде бы отображает так же быстро. Но не у всех же есть этот заветный выделенный канал интернет и лишние килобайты оперативки в компьютере!!! В моем примере указанный шрифт весит 41Kb, казалось бы немного. Однако собственнику сайта, который оплачивает услуги хостинга следует помнить, что сайт скорее всего со временем будет привлекать все больше и больше посетителей. Например при среднем количестве загрузок страниц сайта хотя бы 100 в день, трафик возрастет пропорционально этим лишним килобайтам, а это уже 4 мегабайта «лишнего трафика» в месяц. Если хостинг провайдер не лимитирует трафик для клиента, то сайт будет грузится все медленнее и медленнее, а если лимитирует – то это уже будет бить по кошельку, иногда очень даже серьезно.
Вердикт: хотите – пользуйте на здоровье. Мы вас предупредили. НУ и кончено примерчик:
С уважением, версталы.