Question

我是Javascript（但不是HTML或CSS）的新手，我试图通过Lalit Patel使用此脚本来检测用户系统上是否安装了字体，如果没有，则提供修改后的样式片。我已经成功地使第一部分工作了：我上传了fontdetect.js文件，在我的标题中调用它，然后在我的body标记结束之前粘贴它：

<script type="text/javascript">
window.onload = function() {
    var detective = new Detector();
    alert(detective.detect('Courier'));
};
</script>

（以Courier为例。）这会导致在页面加载时弹出警告，告诉我是否安装了字体，并且工作得很漂亮。但我不知道如何获取脚本，而不是触发警报，抓住不同的样式表。这似乎是基本的东西，但我无法在任何地方找到具体细节，即使我一直在浏览Javascript教程。任何指导将不胜感激！

如果需要更多细节：如果用户没有安装自定义字体或完全关闭自定义字体，我想使用CSS更改文本的大小/间距属性以便回退font可以放在同一个空间中。

Answer 1

var detective = new Detector();
if (!detective.detect('Courier')){
  var s = document.createElement('link');
  s.rel = 'stylesheet';
  s.type = 'text/css';
  s.media = 'all';
  s.href = '/link/to/alternative/stylesheet.css';
  document.getElementsByTagName('head')[0].appendChild(s);
}

猜猜那样的事情。如果.detect()失败，它将动态创建样式表并将其插入页面。如果您遇到问题，也可以使用s元素之外的.setAttribute()。

Answer 2

您可以使用JS向网站添加样式表：

var detective = new Detector();

if (!detective.detect('Courier')){    
     document.createStyleSheet('location/stylesheet.css');
}
else
{
     document.createStyleSheet('location/otherstylesheet.css');
}

所以你可以检查Dectector是否返回true，如果没有加载一种样式，如果它然后加载另一种样式。

Answer 3

在尝试了所有呈现的方法之后，这是一个适合我的方法（来自this answer，但它实际上是这里提出的两个答案的混合）。应该注意的是，这在IE8中有效，与大多数其他方法不同（遗憾的是我确实需要IE8兼容性）。

<script type="text/javascript">
    window.onload = function() {
        var detective = new Detector();
        if (!detective.detect('Meat')){
            var url = 'link/to/style.css'
            if(document.createStyleSheet) {
                try { document.createStyleSheet(url); } catch (e) { }
            }
            else {
                var css;
                css         = document.createElement('link');
                css.rel     = 'stylesheet';
                css.type    = 'text/css';
                css.media   = "all";
                css.href    = url;
                document.getElementsByTagName("head")[0].appendChild(css);
            }
        }
    };
</script>

这检测到我的浏览器不接受嵌入字体（“Meat”是我嵌入的字体之一）并提供备用CSS（尽管有一点点延迟/闪烁的无样式文本，可能因为它位于底部页面？）无论如何，再次感谢所有的帮助！

使用Javascript检测是否安装了字体，如果不是，则提供不同的css

3 个答案: