Использование Cufon и @ font-face вместе

Question

Я думаю, что пришло время широко использовать пользовательские шрифты в сети!Лучший и самый простой способ добавить пользовательские шрифты на ваш сайт - Cufon .Это простой в использовании и действительно кросс-браузер.Он даже поддерживает IE5.5 !!!В любом случае это вынуждает клиента загружать массивный скрипт для шрифта, а также пользователь не может правильно использовать функции «найти» и «увеличить» в своем браузере.С другой стороны, @ font-face широко поддерживается в наши дни и более семантически. Здесь они говорили о поддержке браузера @ font-face и других проблемах.

Мой вопрос заключается в том, как использовать @ font-face и Cufon вместе и доставлять пользовательские шрифты большему количеству клиентов с наилучшей производительностью.Мы не должны загружать пользовательские сценарии Cufon, когда мы можем загрузить пользовательский шрифт через @ font-face, а также мы не должны загружать пользовательский шрифт на стороне клиента, когда мы предпочитаем использовать cufon в целевом клиенте.(Думаю, у нас есть система / браузер, который поддерживает @ font-face, но мы предпочитаем использовать Cufon).

Я прошу вас написать скрипт, основанный на поддержке @ font-face и других факторах, таких как разработчикпоэтому загружает Cufon или пользовательский шрифт. здесь отличный детектор @ font-face:

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 * 
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){


    var fontret,
        fontfaceCheckDelay = 100;

        // IE supports EOT and has had EOT support since IE 5.
        // This is a proprietary standard (ATOW) and thus this off-spec,
        // proprietary test for it is acceptable. 
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement, 
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}";
      doc.getElementsByTagName('head')[0].appendChild(st);


      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

Мне нужна такая функция:

if(isFontFaceSupported()==true && weWantFontFaceHere==true){ 
//add @font-face to the CSS and prevent Cufon
}
else{
//use Cufon
}

Мой вопрос: как это сделать:

add @font-face to the CSS 

Извините за плохой английский.

Answer 1

jQuery имеет функцию fontAvailable, где вы можете проверить, загружен ли шрифт шрифта:

$(document).ready(function() {
    if(!$.fontAvailable('FontFaceFontName')) {
        // Your Cufon Replace Code
    }
});

Answer 2

Используя http://yepnopejs.com/ + http://www.modernizr.com/ (я рекомендую использовать пользовательский конструктор на http://modernizr.github.com/Modernizr/2.0-beta/), вы можете проверить совместимость @ font-face и условно загрузить любой файл CSS с помощью@ font-face rules или загрузите Cufon. Это выполнит именно то, что вы ищете.

К сожалению, Cufon не работает в IE при асинхронной загрузке. Но так как он поддерживает @ font-face, вы не сможетеМне не нужен Cufon. См. https://github.com/sorccu/cufon/issues/171 для получения дополнительной информации.