检测在网页中使用哪种字体
假设我的页面中有以下CSS规则：
body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } 如何检测在用户的浏览器中使用了哪一种定义的字体？
编辑为人们想知道为什么我想这样做：我正在检测的字体包含其他字体不可用的字形，当用户没有字体我想要显示一个链接要求用户下载该字体，所以他们可以使用正确的字体我的Web应用程序。
目前我正在显示所有用户的下载字体链接，我只想显示这个没有安装正确的字体的人。
我已经看到它做了一个有限的，但非常可靠的方式。 基本上，一个元素被设置为使用特定的字体和一个string被设置为该元素。 如果为该元素设置的字体不存在，则采用父元素的字体。 所以，他们做的是测量渲染string的宽度。 如果它与期望的字体匹配，而不是衍生的字体，则它是存在的。
这里是它的来源： Javascript / CSS字体检测器（ajaxian.com; 2007年3月12日）
我写了一个简单的JavaScript工具，可以用它来检查字体是否安装。
它使用简单的技术，大部分时间应该是正确的。
在github上的jFont Checker
有一个简单的解决scheme
function getUserBrowsersFont() { var browserHeader = document.getElementById('header'); return browserHeader.style.font; }
这个function将会正是你想要的。 执行时它将返回用户/访问者浏览器字体types。 希望这会有所帮助
实际上，Safari并没有给出使用的字体，Safari总是返回堆栈中的第一个字体，不pipe它是否被安装，至less在我的经验。
font-family: "my fake font", helvetica, san-serif;
假设Helvetica是安装/使用的，你会得到：
- Safari中的“我的假字体”（我相信其他的webkit浏览器）。
- 在Gecko浏览器和IE浏览器中input“假字体，helvetica，san-serif”。
- Opera 9中的“helvetica”，虽然我读到他们正在改变这个在Opera 10中匹配Gecko。
我对这个问题进行了通过，并创build了Font Unstack，它testing每个字体在堆栈中，并返回第一个安装的字体。 它使用@MojoFilter提到的技巧，但只有在安装了多个的情况下才返回第一个。 虽然它确实遭受了@tlrobinson提到的弱点（Windows将默默地用Arial替代Helvetica，并报告说Helvetica已经安装），但是它运行良好。
FontUnstack
简化的forms是：
function getFont() { return document.getElementById('header').style.font; }
如果你需要更完整的东西，请检查一下。
有效的技术是查看元素的计算风格。 这是在Opera和Firefox（和我在safari侦察，但尚未testing）支持。 IE（至less7）提供了一种获取样式的方法，但似乎是样式表中的任何东西，而不是计算的样式。 有关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，最后是系统默认的sans-serif字体的名称。 请注意，您的CSS声明中的字体sorting是重要的。
一个有趣的黑客你也可以尝试创build大量不同字体的隐藏元素，试图检测在机器上安装的字体。 我敢肯定，有人可以用这种技术做一个漂亮的字体统计收集页面。
另一个解决scheme是通过@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拥有的一种字体，不应该免费发布。 另外，要求用户下载特定的字体不是非常用户友好的。
我会build议购买字体的许可证，并将其embedded到您的应用程序中。
我正在使用Fount。 您只需将Fountbutton拖动到您的书签栏，点击它，然后点击网站上的特定文本。 它会显示该文本的字体。
