如何检测在网页中使用的字体？

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

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

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

对于那些想知道我为什么要这么做的人来说，是因为我检测到的字体包含了其他字体中的 没有字形。如果用户使用的是 没有字体，那么我希望它显示一个链接，要求用户下载该字体(这样他们就可以使用我的 Web 应用程序使用正确的字体)。

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

53645 次浏览
小开
最佳答案

我见过有些不确定，但是很可靠的方法。基本上，元素被设置为使用特定的字体，字符串被设置为该元素。如果元素的字体集不存在，它将采用父元素的字体。所以，它们要做的就是测量呈现的字符串的宽度。如果它匹配他们所期望的字体，而不是派生字体，那么它就存在。这对等间距字体不起作用。

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

小开

一种有效的技术是查看元素的计算样式。Opera 和 Firefox 都支持这一点(我在 safari 中进行过侦察，但还没有测试过)。IE (至少7)提供了一个获取样式的方法，但它似乎是样式表中的样式，而不是计算样式。更多关于离奇模式的细节: 去找斯泰尔斯

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

/**
* 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，如果没有安装，那么返回罢了。最后，返回系统默认 sans-serif 字体的名称。请注意，CSS 声明中字体的顺序非常重要。

你也可以尝试一个有趣的技巧，那就是创建许多隐藏元素，使用许多不同的字体来检测机器上安装了哪些字体。我相信有人可以用这种技术制作一个漂亮的字体统计收集页面。

小开

@ Pat 实际上，Safari 并不提供所使用的字体，相反，Safari 总是返回堆栈中的第一个字体，无论它是否安装，至少在我的经验中是这样的。

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

假设 Helvetica 是一个安装/使用，你会得到:

  • Safari 中的“我的假字体”(我相信其他 webkit 浏览器)。
  • “我的假字体，helvetica，san-serif”在 Gecko 浏览器和 IE 中。
  • “ helvetica”在 Opera 9，虽然我读到他们正在改变这在 Opera 10相匹配 壁虎。

我尝试解决这个问题，并创建了 字体解码，它测试堆栈中的每个字体，并只返回第一个安装的字体。它使用@MojoFilter 提到的技巧，但是只有在安装了多个的情况下才返回第一个。尽管它确实有@tlrobinson 提到的弱点(Windows 会悄悄地用 Arial 代替 Helvetica，并报告 Helvetica 已安装) ，但它在其他方面运行良好。

小开

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

JFont Checker on github

小开

一个简化的表格是:

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

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

小开

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

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

这个函数将完全满足您的要求。在执行时，它将返回用户/浏览器的字体类型。希望这个能帮上忙。

小开

另一个解决方案是通过 @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文件工作最好。

小开

Calibri 是微软的字体，不应该免费发布。另外，要求用户下载特定的字体对用户来说也不是很友好。

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

小开

你可浏览此网页:

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

它完全符合你的要求。

小开

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

Https://fount.artequalswork.com/

小开

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

例如:

font-family: Arial, 'Adobe Blank';

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

浏览器对 serif/sans-serif/monospace 字体有用户设置，而且它们还有自己的硬编码后备字体，如果在字体堆栈中的任何字体中没有找到字形，它们就会使用这些字体，这使得问题变得复杂起来。因此，浏览器可能呈现一些字形，其字体不在字体堆栈或用户的浏览器字体设置中。 Chrome 开发工具将显示所选元素中每个字形的渲染字体.所以在你的机器上你可以看到它在做什么，但是没有办法知道在用户的机器上发生了什么。

用户的系统也有可能在其中发挥作用，例如 窗口字体替换在字形级别。

所以..。

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

如果你想在 JS 中测试它，你可以使用一个字体系列(包括 Adobe Blank)来渲染单个字形，并测量它们的宽度，看看它们是否为零、 但是，你必须遍历每个字形和 要测试的每种字体，但是尽管你可以知道元素字体堆栈中的字体，但是没有办法知道用户的浏览器配置使用什么字体，所以至少对于一些用户来说，你遍历的字体列表将是不完整的。(如果新字体出现并开始使用，这也不是未来的证据。)


提交答案