假设我有我的页面下面的CSS规则：检测在网页中使用了哪种字体
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
我如何检测其定义的字体之一，在用户的浏览器中使用？
编辑的人想知道为什么我想这样做：我检测字体包含字形的不可用在其他字体，当用户不具有的字体我想显示一个链接，要求用户下载该字体，以便他们可以使用正确的字体使用我的Web应用程序。
目前我正在显示所有用户的下载字体链接，我只想为没有安装正确字体的用户显示此信息。
我已经看到它在一种不确定的，但非常可靠的方式完成。基本上，一个元素被设置为使用特定的字体，一个字符串被设置为该元素。如果为该元素设置的字体不存在，它将采用父元素的字体。所以，他们做的是测量渲染字符串的宽度。如果它与期望的字体匹配，而不是派生字体，则它是存在的。
这里是哪里来的： Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)
另一种使用`canvas`元素中的`measureText`的方法：https://github.com/Wildhoney/DetectFont – Wildhoney 2016-02-24 09:35:01
的作品是看元素的计算样式的技术。 Opera和Firefox支持这个功能（并且我在safari中进行了侦察，但尚未经过测试）。 IE（至少7）提供了一种获取样式的方法，但似乎是样式表中的任何内容，而不是计算的样式。在怪异模式的更多细节：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;
}
那么就应该返回黑体如果安装了该功能（如果未安装该功能，则为宋体，最后为系统默认的sans-serif字体的名称）。请注意，CSS声明中的字体排序很重要。
一个有趣的黑客你也可以尝试创建大量不同字体的隐藏元素，试图检测机器上安装的字体。我相信有人可以用这种技术制作一个漂亮的字体统计收集页面。
这将返回像“Helvetica，Arial，sans-serif”这样的css的完整字符串。它不返回正在使用的实际字体。 – 2013-10-02 18:09:44
@pat实际上，Safari并没有给出使用的字体，Safari总是返回堆栈中的第一个字体，不管它是否被安装，至少在我的经验。
font-family: "my fake font", helvetica, san-serif;
假设黑体是一个安装/使用，您将获得：
我在这个问题上采取了一个通过，并创建字体拆分，它测试堆栈中的每个字体，并返回第一个安装的只有一个。它使用@MojoFilter提到的技巧，但只有在安装了多个时才返回第一个。虽然它确实遭受了@tlrobinson提及的弱点（Windows将默默地替代Arial for Helvetica并报告已安装Helvetica），但它运行良好。
我写了一个简单的JavaScript工具，你可以用它来检查是否安装或没有的字体。
它使用简单的技术，大部分时间应该是正确的。
jFont Checker在github
这应该是公认的答案！伟大的工作@Derek。 – mkoistinen 2011-08-27 17:13:19
字体检测不能解决问题。你可以用它迭代认为已声明的字体并检查什么是有效的，但是它几乎没有提供任何给定div使用什么字体的信息。如果您从JS创建div，我们如何知道使用哪种字体？ – 2014-08-31 19:55:43
用简单的形式是：
function getFont() {
return document.getElementById('header').style.font;
}
如果你需要更多的东西完成后，检查this出来。
有一个简单的解决方案
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是Microsoft拥有的一种字体，不应免费发布。而且，要求用户下载特定的字体并不是非常用户友好的。
我会建议购买字体的许可证并将其嵌入到您的应用程序中。
我使用润版液。您只需将Fount按钮拖动到您的书签栏，单击它，然后单击网站上的特定文本。它会显示该文本的字体。
你可以把Adobe Blank在FONT-FAMILY你想看到的字体后，再用任何字形不在该字体将不会被渲染。
例如：
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。所以在你的机器上你可以看到它在做什么，但是没有办法知道用户机器上发生了什么。
用户的系统也可能在其中扮演一个角色，例如，字形级别的Window does Font Substitution。
所以......
对于您感兴趣的字形，你无法知道他们是否会通过用户的浏览器/系统回退中呈现的方式，即使他们没有字体指定。
如果你想测试它在JS，你可以渲染字体家族的各个字形，包括Adobe空白，并测量它们的宽度，看它是否是零，但你不得不遍历彻底每个字形和每个字体你想测试，但尽管你可以知道元素字体堆栈中的字体，但是无法知道用户的浏览器配置为使用什么字体，所以至少对于某些用户来说，您需要遍历的字体列表将不完整。 （如果出现新字体并开始使用，这也不是未来的证明。）
小心谨慎：如果您提供链接以下载Calibri，请注意，虽然它是捆绑在多个Microsoft产品中的，是**不是**免费字体，并且您通过提供下载来侵犯版权。 – 2008-09-01 08:18:20
有一点需要记住的是，有些浏览器会用相似的字体替换某些缺少的字体，这是使用JavaScript/CSS技巧无法检测到的。例如，如果未安装，Windows浏览器将替换为Helvetica的Arial。 MojoFilter和dragonmatank提到的技巧仍然会报告Helvetica已安装，即使它不是。 – tlrobinson 2008-08-04 01:05:30