如何检测网页中使用了哪一个定义的字体？

Question

假设我的页面中有以下CSS规则:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

如何检测用户浏览器中使用了哪一种已定义的字体？

编辑让人想知道为什么我要这样做:我检测的字体包含其他字体不可用的字形,当用户没有字体时我想显示一个链接,要求用户下载该字体,以便他们可以使用我的Web应用程序与正确的字体.

目前我正在显示所有用户的下载字体链接,我想只显示没有安装正确字体的人.

Answer 1

我已经看到它以一种不确定但非常可靠的方式完成.基本上,元素设置为使用特定字体,并且字符串设置为该元素.如果元素的字体集不存在,则采用父元素的字体.因此,他们所做的是测量渲染字符串的宽度.如果它与期望的字体相对于派生字体的预期匹配,则它存在.

这里是它的来源: Javascript/CSS字体检测器(ajaxian.com; 2007年3月12日)

Answer 2

我写了一个简单的JavaScript工具,您可以使用它来检查是否安装了字体.
它使用简单的技术,大多数时候应该是正确的.

github上的 jFont Checker

Answer 3

@pat实际上,Safari并没有提供使用的字体,而是Safari总是返回堆栈中的第一个字体,无论它是否已安装,至少根据我的经验.

font-family: "my fake font", helvetica, san-serif;

假设Helvetica是安装/使用的那个,你会得到:

• Safari中的"我的假字体"(我相信其他webkit浏览器).
• Gecko浏览器和IE中的"我的假字体,helvetica,san-serif".
• Opera 9中的"helvetica"虽然我读到他们正在改变Opera 10中的这个以匹配Gecko.

我对这个问题进行了传递并创建了Font Unstack,它测试堆栈中的每个字体并仅返回第一个安装的字体.它使用了@MojoFilter提到的技巧,但只安装了多个,只返回第一个.虽然它确实遭受了@tlrobinson提到的弱点(Windows将默默地用Arial代替Helvetica并报告安装了Helvetica),但它的效果还是不错的.

FontUnstack

Answer 4

一种有效的技术是查看元素的计算样式.这在Opera和Firefox中得到了支持(我在safari中进行了重新调试,但尚未测试).IE(至少7个),提供了一种获取样式的方法,但它似乎是样式表中的任何内容,而不是计算样式.关于quirksmode的更多细节:获取样式

这是一个简单的函数来获取元素中使用的字体:

/**
 * 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如果安装了,如果没有,arial,最后,系统默认sans-serif字体的名称.请注意,CSS声明中字体的排序很重要.

您还可以尝试的一个有趣的黑客是创建大量具有许多不同字体的隐藏元素,以尝试检测计算机上安装的字体.我相信有人可以使用这种技术制作一个漂亮的字体统计信息收集页面.

Answer 5

简化形式是:

function getFont() {
    return document.getElementById('header').style.font;
}

如果您需要更完整的内容,请查看此内容.

Answer 6

有一个简单的解决方案

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

这个功能将完全按照你的意愿行事.执行时它将返回用户/访问者浏览器字体类型.希望这会有所帮助

Answer 7

另一种解决方案是自动安装字体,通过@font-face该字体可能无需检测.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

当然它不会解决任何版权问题,但是你可以随时使用免费软件字体甚至制作自己的字体.您需要两个.eot&.ttf文件才能最好地工作.

Answer 8

Calibri 是 Microsoft 拥有的字体，不应免费分发。此外，要求用户下载特定字体也不太方便。

我建议购买该字体的许可证并将其嵌入到您的应用程序中。