jQuery check浏览器css版本

我自己也没用过,但有个问题 modernizr 可以检测多种现代浏览器功能的JavaScript工具:

Modernizr使用特征检测来测试当前浏览器的特性,比如rgba()、border radius、CSS转换等等。这些功能目前正在跨浏览器实现,使用Modernizr,您可以立即开始使用它们,并使用一种简单的方法来控制尚不支持它们的浏览器的回退。

font-face 但是。

你也可以运行一个浏览器检查,用特定的浏览器做一些事情,我想你也可以检查浏览器的版本,但是关于@font-face的细节,我不是100%确定。

<script type="text/javascript">
  $(document).ready(function(){

    var browser;
    if($.browser.mozilla)
      //Firefox
     $("p").css("font-style","...");
    else if($.msie)
      // Internet Explorer
     $("p").css("font-style","...");
    else if($.browser.opera)
      // Opera
     $("p").css("font-style","...");
    else if($.browser.safari)
      // Safari
     $("p").css("font-style","...");
    else
      //Unknown
     $("p").css("font-style","...");

    $('#browserName').append(browser);
  });

如何检查用户浏览器中是否存在@font face?

好吧,我想你可以在家里翻找 document.styleSheets @font-face 规则已解析为 FONT_FACE_RULE 规则对象(为IE的不同样式表模型提供必要的对象嗅探回退。)

但这并不是一个好主意,也可能不是一个正确的问题。也许浏览器支持 @字体 不 支持嵌入,但是用户碰巧安装了您想要的字体。

一个更好的问题是,我的特殊字体被使用了吗?。虽然没有直接的方法来查询,但是你可以通过查看 offsetWidth

例如:

<script type="text/javascript">
    function haveFont(face) {
        var span= $('<span style="visibility: hidden; font-size: 48px">jilf:.,!</span>')[0];
        document.body.appendChild(span);
        span.style.fontFamily= 'monospace';
        var width0= span.offsetWidth;
        span.style.fontFamily= '"'+face+'", monospace';
        var width1= span.offsetWidth;
        document.body.removeChild(span);
        return span.offsetWidth!==width;
    }

    window.onload= function() {
        if (!haveFont('My Embedded Font Bold Extranice')) {
            replaceHeadingsWithImages();
        }
    }
</script>

如果要检测ttf/otf支持(不是svg)
this
你只需要使用 if 和 else

font-face-detect