@font-face вместо Cufon
спользование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие JS библиотеки как sIFR , typeface и Cufon. В них есть как множество плюсов так и минусов… также можно задаться вопросом, что из этого списка лучше использовать для своего проекта, и я вам скажу, что лучше использовать @font-face и отображать шрифт как обычный текст.
Но как всегда есть браузеры ;) которые это свойство не поддерживают и нечего не остаётся как использовать вышеперечисленные библиотеки. Сегодня я хочу познакомить вас с методикой как, используя нестандартный шрифт, разграничить методы отображения шрифтов между этими браузерами.
Для этой цели я воспользуюсь jquery-fontavailable. Данный плагин позволяет определить поддержку нестандартного фонта браузером, даже если он подключен с помощью @font-face. так сразу покажу пример, в старых браузерах у вас отобразится шрифт сгенерированный cufon_ом, а в тех где поддерживается @font-face – будет текст.
Пример работы скрипта:
Стандартный плагин jquery-fontavailable работает иногда не корректно, поэтому я его немного усовершенствовал. Моя версия этого плагина выглядит так (копирайты я оставил, т.к. изменил всего две строчки):
*
* Copyright (c) 2009, Howard Rauscher
* Licensed under the MIT License
*/
(function($) {
var element;
$.fontAvailable = function(fontName) {
var width, height;
// prepare element, and append to DOM
if(!element) {
element = $( document.createElement( 'span' ))
.css( 'visibility', 'hidden' )
.css( 'position', 'absolute' )
.css( 'top', '-10000px' )
.css( 'left', '-10000px' )
.html( 'abcdefghijklmnopqrstuvwxyz' )
.appendTo( document.body );
}
// get the width/height of element after applying a fake font
var __FAKEFONT__ = element.parent().css('font-family');
width = element
.css('font-family', __FAKEFONT__)
.width();
height = element.height();
// set test font
element.css('font-family', fontName);
return (width !== element.width() || height !== element.height()) && navigator.appVersion.indexOf('Chrome') == -1;
}
})(jQuery);
Удивительно, но Google Chrome не поддерживает свойство @font-face из-за соображений безопасности. Но это можно обойти выключив в командной строке –enable-remote-fonts. Но все же, я сделал что бы в модифицированной версии шрифт в Chrome куфонился.
Что нужно для работы данного метода.
CSS код:
font-family: "KB Zero";
src:url("../fonts/zero.ttf");
}
html, body{
font-family:Arial, Helvetica, sans-serif;
}
p {
font:bold 16px "KB Zero";
}
В css коде мы с помощью @font-face объявляем font-family и указываем путь к файлу шрифта. Для body указывается стандарный web шрифт, это нужно для работы скрипта. Ну и применяем шрифт к тегу P. HTML код я показывать не буду т.к. там у меня находится только одно предложение завернутое в тег P.
JavaScript код:
if(!$.fontAvailable('KB Zero')) {
Cufon.replace('p', {fontFamily: 'KB Zero'});
}
});
сходя из того, что пример был построен на базе Cufon, я не буду рассказывать как его подключить, это можно посмотреть сдесь.
Логика подключения fontAvailable выглядит элементарно…
$.fontAvailable(‘KB Zero’)- возвращает булеву переменную после проверки на поддержку браузером данного шрифта, а значит нам нужно инициализировать плагин в условии, и если шрифт не поддерживается – будет отрабатывать Cufon
Вместе с этим плагином можно использовать и sIFR с typeface, достаточно лишь инициализировать их в данном условии.
Скачать пример
11 Коментариев to @font-face вместо Cufon
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Автор, ты молодец, читаю твой блог постоянно, почерпнул очень многое, использую пару твоих скриптов, если хочешь – поставлю твой баннер себе на сайт безвозмездно (150X40)
В примере какой то глюк, мозила.
Когда выделяешь тот текст, а потом сбрасываешь выделение у него другой фон
Это не совсем глюк, выделение не сбрасывается потому, что вы клацаете за границами iframe…
А как то можно решить эту проблему?
Это не проблема. На сайте используется iframe для отображения примера… если вы скачаете пример локально и запустите его – все будет работать корректно. Такой эффект наблюдается только с iframe, и это лечится разве что дополнительным ДЖСом.
Ааа) Я чет затупил =)
Я считаю эти танцы с бубном пока лишние, вскоре когда все браузеры будут нормально понимать цсс3, а старые сдохнут, тогда думаю это время и настанет.
А так можно и обычные шрифты красиво тянуть + изображения.
Да, заморочено. Но те времена, когда все браузеры будут поддерживать все современные технологии, наступят не скоро…. по крайней мере не ближайшие пару лет точно.
alf, а сейчас пока ие не понимает, но я у себя использую в цитатах рукописный шрифт
http://www.youtube.com/watch?v=ivhgb0urkFA&feature=player_embedded
без комментариев 8)
Alf, спасибо за ссылку. Google приятно удивил в очередной раз.
Действительно, зачем извращаться со скриптами, когда есть более простые способы?!