@font-face вместо Cufon

спользование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие JS библиотеки как sIFR , typeface и Cufon. В них есть как множество плюсов так и минусов… также можно задаться вопросом, что из этого списка лучше использовать для своего проекта, и я вам скажу, что лучше использовать @font-face и отображать шрифт как обычный текст.

Но как всегда есть браузеры ;) которые это свойство не поддерживают и нечего не остаётся как использовать вышеперечисленные библиотеки. Сегодня я хочу познакомить вас с методикой как, используя нестандартный шрифт, разграничить методы отображения шрифтов между этими браузерами.

Для этой цели я воспользуюсь jquery-fontavailable. Данный плагин позволяет определить поддержку нестандартного фонта браузером, даже если он подключен с помощью @font-face. так сразу покажу пример, в старых браузерах у вас отобразится шрифт сгенерированный cufon_ом, а в тех где поддерживается @font-face – будет текст.

Пример работы скрипта:

Стандартный плагин jquery-fontavailable работает иногда не корректно, поэтому я его немного усовершенствовал. Моя версия этого плагина выглядит так (копирайты я оставил, т.к. изменил всего две строчки):

/* fontAvailable jQuery Plugin, v1.1
 *
 * 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-face {
    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 код:

$(document).ready(function(){
    if(!$.fontAvailable('KB Zero')) {
        Cufon.replace('p', {fontFamily: 'KB Zero'});
    }
});

сходя из того, что пример был построен на базе Cufon, я не буду рассказывать как его подключить, это можно посмотреть сдесь.

Логика подключения fontAvailable выглядит элементарно…
$.fontAvailable(‘KB Zero’)- возвращает булеву переменную после проверки на поддержку браузером данного шрифта, а значит нам нужно инициализировать плагин в условии, и если шрифт не поддерживается – будет отрабатывать Cufon

Вместе с этим плагином можно использовать и sIFR с typeface, достаточно лишь инициализировать их в данном условии.

Скачать пример

Tags: , , , ,

Пятница, Ноябрь 27th, 2009 JS Plugins, JavaScript, jQuery, Верстка, Методики

11 Коментариев to @font-face вместо Cufon

  • YaR:

    Автор, ты молодец, читаю твой блог постоянно, почерпнул очень многое, использую пару твоих скриптов, если хочешь – поставлю твой баннер себе на сайт безвозмездно (150X40)

  • В примере какой то глюк, мозила.

    Когда выделяешь тот текст, а потом сбрасываешь выделение у него другой фон

  • Это не совсем глюк, выделение не сбрасывается потому, что вы клацаете за границами iframe…

  • А как то можно решить эту проблему?

  • Это не проблема. На сайте используется iframe для отображения примера… если вы скачаете пример локально и запустите его – все будет работать корректно. Такой эффект наблюдается только с iframe, и это лечится разве что дополнительным ДЖСом.

  • Ааа) Я чет затупил =)

  • alf:

    Я считаю эти танцы с бубном пока лишние, вскоре когда все браузеры будут нормально понимать цсс3, а старые сдохнут, тогда думаю это время и настанет.

    А так можно и обычные шрифты красиво тянуть + изображения.

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

  • alf, а сейчас пока ие не понимает, но я у себя использую в цитатах рукописный шрифт

  • Александр:

    Alf, спасибо за ссылку. Google приятно удивил в очередной раз.
    Действительно, зачем извращаться со скриптами, когда есть более простые способы?!

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы