Javascript 同时使用Cufon和@font face

我认为现在是在网络上广泛使用自定义字体的时候了！向网站添加自定义字体的最佳和最简单的方法是。这是易于使用，真正跨浏览器。它甚至支持IE5.5！！！无论如何，它迫使客户端下载大量字体脚本，用户也无法在浏览器中正确使用“查找”和“缩放”功能。 另一方面，@font-face现在得到了广泛的支持，而且更具语义。他们谈到了@font-face浏览器支持和其他问题

我的问题是如何同时使用@font-face和Cufon，并以最佳性能向更多客户提供自定义字体。当我们可以通过@font-face加载自定义字体时，我们不应该加载Cufon的自定义脚本；当我们更喜欢在目标客户端使用Cufon时，我们也不应该在客户端加载自定义字体。（假设我们有支持@font-face的系统/浏览器，但我们使用Cufon进行预过滤）

我要求您编写一个基于@font-face支持和其他因素（如开发人员偏好）的脚本，以便加载Cufon或自定义字体。是一款很棒的@font人脸检测器：

/*!
 * 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 

---

抱歉，英语不好。

jQuery有一个fontface功能，您可以在其中检查fontface字体是否已加载：

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

---

jQuery有一个fontface函数，您可以在其中检查是否加载了fontface字体：

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

使用+（我建议使用自定义生成器）可以测试@font-face兼容性，并有条件地加载带有@font-face规则的CSS文件，或者加载Cufon。这将完全满足您的需求

不幸的是，当异步加载时，Cufon在IE中不工作。但是因为它支持@font-face，所以您不需要Cufon。有关详细信息，请参见。

使用+（我建议使用自定义生成器），您可以测试@font-face兼容性，并有条件地加载带有@font-face规则的CSS文件，或加载Cufon。这将完全满足您的需求

---

不幸的是，当异步加载时，Cufon在IE中不工作。但是因为它支持@font-face，所以您不需要Cufon。有关更多信息，请参阅。

谢谢，很高兴知道。但我的问题是如何防止加载@font-face字体。如果你有一个要为fontface服务的浏览器列表，你只是不加载@fontface字体。您可以使用Javascript（navigator.userAgent）中的浏览器检测来实现这一点。问题是我无法使用Javascript访问CSS文件，一旦读取CSS文件，字体就开始加载。有什么想法吗？只要强制使用非@font-face字体即可。比如：

document.style.fontfamine='Arial'谢谢，很高兴知道。但我的问题是如何防止加载@font-face字体。如果你有一个要为fontface服务的浏览器列表，你只是不加载@fontface字体。您可以使用Javascript（navigator.userAgent）中的浏览器检测来实现这一点。问题是我无法使用Javascript访问CSS文件，一旦读取CSS文件，字体就开始加载。有什么想法吗？只要强制使用非@font-face字体即可。比如：
document.style.fontfamine='Arial'