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

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 更改文本的大小/间距属性，以便后备字体能够适应相同的空间。

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() 失败，它将动态创建样式表并将其插入到页面中。遇到问题也可以用.setAttribute()离开 s 元素。