Javascript 如何检测网页中使用了哪种已定义字体？

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

正文{
字体系列：Calibri，投石机MS，Helvetica，无衬线；
}

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

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

---

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

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

这就是它的来源：

---

一种有效的方法是查看元素的计算样式。Opera和Firefox都支持这一点（我在safari中也支持recon，但还没有测试）。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声明中字体的顺序非常重要

---

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

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

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

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

• Safari中的“我的假字体”（我相信还有其他webkit浏览器）
• Gecko浏览器和IE中的“我的假字体，helvetica，san serif”
• 歌剧9中的“helvetica”，尽管我读到他们在歌剧10中改变了这一点以匹配 壁虎

---

我解决了这个问题，创建了一个测试堆栈中每种字体的程序，只返回第一个安装的字体。它使用@MojoFilter提到的技巧，但只有在安装了多个时才返回第一个。尽管它确实存在@tlrobinson提到的缺点（Windows将无声地用Arial代替Helvetica并报告安装了Helvetica），但它在其他方面运行良好。

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

在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{
字体系列：“Calibri”；
src:url（“http://www.yourwebsite.com/fonts/Calibri.eot");
src:local（“Calibri”），url（“http://www.yourwebsite.com/fonts/Calibri.ttf）格式（“truetype”）；
}

---

当然，它不会解决任何版权问题，但是你可以随时使用免费字体，甚至制作自己的字体。您需要

.eot

和

.ttf

两个文件才能发挥最佳效果。

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

---

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

您可以使用以下网站：

---

它正是你想要的…

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

您可以将字体系列放在希望看到的字体之后，然后任何不在该字体中的字形都不会被渲染

e、 g:

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

浏览器有衬线/无衬线/单空格字体的用户设置，而且浏览器也有自己的硬编码后退字体，如果在字体堆栈中的任何字体中都找不到字形，浏览器将使用这些字体，这一点就变得复杂了因此浏览器可能会以不在字体堆栈或用户浏览器字体设置中的字体呈现某些字形。。所以在你的机器上你可以看到它在做什么，但是没有办法知道用户机器上发生了什么

用户系统也可能在这方面发挥作用，例如在字形级别

所以

对于您感兴趣的glyph，您无法知道它们是否将由用户的浏览器/系统回退渲染，即使它们没有您指定的字体

如果你想在JS中测试它，你可以用一个字体系列（包括Adobe Blank）呈现单个字形，并测量它们的宽度，看看它是否为零，，但是你必须遍历每个字形和你想测试的每个字体

font-family: Arial, 'Adobe Blank';