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

Question

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

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

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

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

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

score 80 · Accepted Answer

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

它来自： Javascript/CSS 字体检测器（ajaxian.com；2007 年 3 月 12 日）

score 36 · Accepted Answer

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

github上的jFont Checker

score 11 · Accepted Answer

@pat 实际上，Safari 没有给出使用的字体，Safari 总是返回堆栈中的第一个字体，无论是否安装，至少在我的经验中是这样。

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

假设 Helvetica 是已安装/使用的，您将获得：

Safari 中的“我的假字体”（我相信其他 webkit 浏览器）。
Gecko 浏览器和 IE 中的“my fake font, helvetica, san-serif”。
Opera 9 中的“helvetica”，尽管我读到他们正在 Opera 10 中更改它以匹配 Gecko。

我通过了这个问题并创建了Font Unstack，它测试堆栈中的每种字体并仅返回第一个安装的字体。它使用@MojoFilter 提到的技巧，但如果安装了多个，则仅返回第一个。尽管它确实受到@tlrobinson 提到的弱点的影响（Windows 会默默地用 Arial 代替 Helvetica 并报告 Helvetica 已安装），但它在其他方面运行良好。

score 10 · Accepted Answer

一种有效的技术是查看元素的计算样式。这在 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，最后返回系统默认无衬线字体的名称。请注意，CSS 声明中的字体顺序很重要。

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

score 9 · Accepted Answer

一个简化的形式是：

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

如果您需要更完整的内容，请查看此内容。

score 9 · Accepted Answer

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

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

此功能将完全满足您的需求。执行时它将返回用户/浏览器的字体类型。希望这会有所帮助。

score 7 · Accepted Answer

另一种解决方案是自动安装字体，@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文件才能最好地工作。

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

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

https://fount.artequalswork.com/

score 2 · Accepted Answer

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

例如：

font-family: Arial, 'Adobe Blank';

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

这很复杂，因为浏览器具有 serif/sans-serif/monospace 字体的用户设置，并且它们也有自己的硬编码后备字体，如果在任何字体中都找不到字形，它们将使用这些字体。字体堆栈。因此浏览器可能会以不在字体堆栈或用户浏览器字体设置中的字体呈现某些字形。 Chrome 开发工具将向您显示所选元素中字形的每种渲染字体。所以在你的机器上你可以看到它在做什么，但是没有办法知道用户机器上发生了什么。

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

所以...

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

如果您想在 JS 中对其进行测试，您可以使用包括 Adobe Blank 在内的字体系列渲染单个字形并测量它们的宽度以查看它是否为零，但是您必须遍历每个字形和您想要测试的每种字体，但是，尽管您可以知道元素字体堆栈中的字体，但无法知道用户的浏览器配置为使用哪些字体，因此至少对于您的一些用户，您迭代的字体列表将是不完整的。（如果新字体出现并开始使用，这也不是未来的证据。）

score 1 · Accepted Answer

1

你可以使用这个网站：

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

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

于 2015-04-11T20:41:28.363 回答

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

11 回答 11

Related

Reference