Question

我希望将@ font-face用于新浏览器并将图像替换用于其他浏览器...... 如何检查@ font-face是否存在于用户浏览器中？

Answer 1

我自己没有使用它，但是modernizr JavaScript工具可以检测各种现代浏览器功能：

Modernizr使用特征检测来测试当前浏览器与即将推出的功能，如rgba（），border-radius，CSS Transitions等等。这些目前正在跨浏览器实现，而现在，您可以使用Modernizr开始使用它们，并可以通过简单的方法来控制尚不支持它们的浏览器的回退。

尝试并试一试。 JQuery有自己的特征检测功能，但它还无法检测到font-face。

Answer 2

您还可以运行浏览器检查，并使用特定浏览器执行操作，我认为您也可以检查浏览器版本，但是详细了解@ 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);
  });

Answer 3

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

好吧，我想你可以在document.styleSheets中翻找，看看是否已将@font-face规则解析为FONT_FACE_RULE规则对象。（对IE的不同样式表模型进行必要的对象嗅探后备。）

但这不是一个好主意，而且可能不是正确的问题。也许浏览器支持@font-face，但不支持您使用的特定字体格式（TTF / OTF / EOT / WOFF）。也许浏览器/用户样式表设置为覆盖或忽略规则。也许这个字体无法从网络中获取。也许浏览器不支持支持嵌入，但用户恰好有了你想安装的字体。

更好的问题是，“我使用了我的特殊字体吗？”。虽然没有直接的方法来查询，但通常可以通过查看目标字体中包含文本的内联元素的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>

Answer 4

如果你想检测ttf / otf支持（不是svg）
this是你在寻找的我只需要使用if和else

Answer 5

您想使用font-face-detect。

jQuery检查浏览器的css版本

5 个答案: