Question

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

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

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

编辑让人想知道我为什么要这样做：我正在检测的字体包含其他字体无法使用的字形，当用户没有我要显示的字体时链接要求用户下载该字体，以便他们可以使用我的Web应用程序使用正确的字体。

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

Answer 1

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

以下是它的来源： Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Answer 2

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

github上的

jFont Checker

Answer 3

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

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

假设Helvetica是安装/使用过的，你会得到：

“我的假字体”（我相信其他webkit浏览器）。
“我的假字体，helvetica，san-serif”在Gecko浏览器和IE中。
“helvetica”，虽然我读到他们在Opera 10中改变它以匹配壁虎。

我接受了这个问题的传递并创建了Font Unstack，它测试堆栈中的每个字体并仅返回第一个安装的字体。它使用了@MojoFilter提到的技巧，但只安装了多个，只返回第一个。虽然它确实遭受了@tlrobinson所提到的弱点（Windows会默默地用Arial取代Helvetica并报告已经安装了Helvetica），但它运作良好。

Answer 4

一种有效的技术是查看元素的计算样式。这在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（如果没有），如果没有，arial，最后是系统默认sans-serif字体的名称。请注意，CSS声明中字体的排序很重要。

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

Answer 5

简化形式是：

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

如果您需要更完整的内容，请检查this。

Answer 6

有一个简单的解决方案 - 只需使用element.style.font：

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和＆amp; .ttf个文件最佳。

Answer 8

Calibri是Microsoft拥有的字体，不应免费分发。此外，要求用户下载特定字体不是非常用户友好的。

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

Answer 9

您可以使用本网站：

http://website-font-analyzer.com/

它完全符合您的要求......

Answer 10

我正在使用Fount。您只需将Fount按钮拖动到书签栏，单击它，然后单击网站上的特定文本即可。然后它将显示该文本的字体。

https://fount.artequalswork.com/

Answer 11

您可以在要查看的字体之后将Adobe Blank放在font-family中，然后不会呈现任何不在该字体中的字形。

e.g：

font-family: Arial, 'Adobe Blank';

据我所知，没有JS方法可以判断元素中哪些字形是由该元素的字体堆栈中的哪种字体呈现的。

这很复杂，因为浏览器具有serif / sans-serif / monospace字体的用户设置，并且它们也有自己的硬编码后备字体，如果在任何字体中找不到字形，它们将使用它们字体堆栈中的字体。 因此，浏览器可能会以不在字体堆栈或用户浏览器字体设置中的字体呈现某些字形。 Chrome Dev Tools will show you each rendered font for the glyphs in the selected element。所以在你的机器上你可以看到它正在做什么，但没有办法告诉用户机器上发生了什么。

用户的系统也可能在其中扮演一个角色，例如{4}在字形级别。

所以...

对于您感兴趣的字形，您无法知道它们是否会由用户的浏览器/系统回退呈现，即使它们没有您指定的字体。

如果你想在JS中测试它，你可以使用包含Adobe Blank的font-family渲染单个字形，并测量它们的宽度以查看它是否为零，但是你必须彻底迭代每个字形和您要测试的每种字体，但是虽然您可以知道元素字体堆栈中的字体，但是无法知道用户的浏览器配置使用哪种字体，因此至少部分字体您的用户您迭代的字体列表将不完整。（如果新的字体出现并开始使用，它也不是未来的证据。）

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

11 个答案: