检测在网页中使用哪种字体

假设我的页面中有以下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到您的应用程序中。

你可以使用这个网站:

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

它正是你想要的…

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

https://fount.artequalswork.com/