0

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

4

5 回答 5

3

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

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

试一试。JQuery 有自己的特征检测功能，但它还不能检测font-face。

于 2010-03-13T22:45:41.597 回答
1

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

好吧，我想您可以四处document.styleSheets寻找@font-face规则是否已被解析为FONT_FACE_RULERule 对象。（为 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>
于 2010-03-14T00:18:02.657 回答
1

您还可以运行浏览器检查，并使用特定浏览器执行操作，我认为您也可以检查浏览器版本，但要详细了解@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);
  });
于 2010-03-13T22:52:11.720 回答
1

如果您想检测 ttf/otf 支持（不是 svg）
，这就是您寻找ull
必须使用if的else

于 2010-03-15T02:40:44.207 回答
1

您想使用font-face-detect。

于 2010-03-15T02:43:52.900 回答