假设我的页面中有以下CSS规则:
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
如何检测在用户浏览器中使用了哪种已定义的字体?
对于想知道我为什么要这样做的人来说,是因为我检测到的字体包含其他字体中没有的字形。如果用户没有该字体,那么我希望它显示一个链接,要求用户下载该字体(这样他们就可以使用具有正确字体的web应用程序)。
目前,我正在为所有用户显示下载字体链接。我想只为那些没有安装正确字体的人显示这个。
发布于 2008-08-03 21:51:44
我看到它是以一种可疑的,但相当可靠的方式完成的。基本上,将一个元素设置为使用特定的字体,并将一个字符串设置为该元素。如果为元素设置的字体不存在,它将采用父元素的字体。所以,他们所做的就是测量渲染字符串的宽度。如果它符合他们对所需字体的期望,而不是派生字体,那么它就存在。这对等宽字体不起作用。
这是它的出处:Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)
发布于 2008-08-25 22:16:22
一种可行的技术是查看元素的计算样式。这在Opera和Firefox中是受支持的(我在safari中进行了研究,但还没有测试过)。IE (至少是7)提供了一种获取样式的方法,但它似乎是样式表中的样式,而不是计算样式。有关quirksmode模式的更多详细信息:Get Styles
下面是一个简单的函数,用于获取元素中使用的字体:
/**
* Get the font used for a given element
* @argument {HTMLElement} the element to check font for
* @returns {string} The name of the used font or null if font could not be detected
*/
function getFontForElement(ele) {
if (ele.currentStyle) { // sort of, but not really, works in IE
return ele.currentStyle["fontFamily"];
} else if (document.defaultView) { // works in Opera and FF
return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
} else {
return null;
}
}
如果它的CSS规则是:
#fonttester {
font-family: sans-serif, arial, helvetica;
}
如果安装了helvetica,那么它应该返回helvetica,如果没有安装,则返回arial,最后返回系统默认sans-serif字体的名称。请注意,CSS声明中的字体顺序非常重要。
一个有趣的技巧,你也可以尝试创建许多隐藏元素与许多不同的字体,试图检测哪些字体安装在机器上。我相信有人可以用这种技术制作一个漂亮的字体统计信息收集页面。
发布于 2011-10-23 21:32:13
一个简化的形式是:
function getFont() {
return document.getElementById('header').style.font;
}
如果您需要更完整的内容,请查看this。
https://stackoverflow.com/questions/845
复制相似问题