检查字体系列是否生效 | CSS-Tricks

function checkFont(strFamily) {
  var objDiv = document.createElement('div');

  objDiv.style.fontFamily = strFamily;
  objDiv.appendChild(document.createTextNode('FONT TEST'));

  if (window.getComputedStyle) {
      return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
  }

  return objDiv.currentStyle.fontFamily === strFamily;
}

用法

var iconFontHonored = checkFont('icomoon');

Ryan McKay

# 2013年10月31日

不错！有用，谢谢 :)

Federico Brigante

# 2013年11月4日

这是完全错误的。window.getComputedStyle(objDiv, null).getPropertyValue('font-family') 的值将始终是你声明的值。

这里： http://codepen.io/anon/pen/HIKDq
Chrome 报告所有字体都缺失，Firefox 报告所有字体都可用。

Chris Coyier

评论永久链接# 2013年11月4日

也许看看作者怎么说？ http://juicystudio.com/article/icon-fonts-user-defined-stylesheets.php
Federico Brigante

评论永久链接# 2013年11月4日

我在那里留下了一条评论。如果有人正在寻找解决方案，这似乎是一个可行的方案： http://www.lalit.org/lab/javascript-css-font-detect/
Jacques

评论永久链接# 2015年7月14日

是的，这段代码坏了。

Robert

# 2015年4月21日

如果主题是验证可用字体，我不明白这将如何提供帮助。我需要什么，我认为大多数设计师也需要什么，是一个脚本，它可以告诉我字体堆栈中的哪些字体在每个浏览器和操作系统上显示页面时出现。

Adam

# 2016年2月24日

尝试使用： https://github.com/Wildhoney/DetectFont

import { detectFont, supportedFonts } from 'detect-font';

const element = document.querySelector('.element');
console.log(detectFont(element));

Shagen Ogandzhanian

# 2017年9月8日

不幸的是，这根本不起作用——在 Firefox 中它将始终返回 true，在 Chrome 中它将始终返回 false。

评论

发表回复 取消回复

发表回复取消回复