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

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

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

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

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

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

0
额外 编辑
意见: 2
有一点需要记住的是,一些浏览器会用相似的字体替换某些缺少的字体,这是使用JavaScript / CSS技巧无法检测到的。例如,如果未安装,Windows浏览器将替换为Helvetica的Arial。 MojoFilter和dragonmatank提到的技巧仍然会报告Helvetica已安装,即使它不是。
额外 作者 tlrobinson,
小心谨慎:如果您提供链接以下载Calibri,请注意,虽然它是捆绑在多个Microsoft产品中的,但不是免费字体,并且您通过提供它而违反版权下载。
额外 作者 Adam Hepton,

11 答案

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

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

0
额外
另一种使用 canvas 元素中的 measureText 的方法: github.com / Wildhoney / DetectFont
额外 作者 Wildhoney,

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

https://fount.artequalswork.com/

0
额外

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

0
额外
@JonLennartAasenden为了获得使用的字体,我相信你可以使用“computedStyle”属性(我忘了确切的名字,但它是这样的。)
额外 作者 Derek 朕會功夫,
字体检测不能解决问题。你可以用它迭代认为已声明的字体并检查什么是有效的,但是它几乎没有提供任何给定div使用什么字体的信息。如果您从JS创建div,我们如何知道使用哪种字体?
额外 作者 Jon Lennart Aasenden,
我写了一个适用于所有浏览器的类。它是用JS编写的Smart Pascal编写的,所以我不能在这里发布解决方案 - 但总之,我不得不提取字体家族字符串,然后检查每个字体是否有效,抓住第一个有效的 - 然后无处不在。我将“字体检测器”移植到智能帕斯卡,并做了一些调整。
额外 作者 Jon Lennart Aasenden,
这应该是被接受的答案!伟大的工作@Derek。
额外 作者 mkoistinen,
@JonLennartAasenden这听起来不像你的班是万无一失的。如果已安装字体,浏览器将检查每种字体的优先级,但有时会选择在列表中使用较低优先级的字体,如果较高优先级的已安装字体缺少不匹配请求大小的字符或字形。
额外 作者 Brandon Elliott,

你可以使用这个网站:

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

它正是你想要的......

0
额外

您可以在字体后面加上 Adob​​e Blank 字体想看,然后任何不在该字体中的字形将不会被渲染。

例如。:

font-family: Arial, 'Adobe Blank';

据我所知,没有JS方法可以通过该元素的字体堆栈中的哪种字体来呈现元素中的哪些字形正在呈现。

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

用户的系统也可能参与其中,例如, 窗口在字形级别进行字体替换

所以...

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

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

0
额外

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: 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;
}

然后,如果安装了它,它应该返回helvetica,如果不是,则是arial,最后是系统默认的sans-serif字体的名称。请注意,CSS声明中的字体排序很重要。

一个有趣的黑客你也可以尝试创建大量不同字体的隐藏元素,以尝试检测机器上安装的字体。我相信有人可以用这种技术制作一个漂亮的字体统计收集页面。

0
额外
这将返回像“Helvetica,Arial,sans-serif”这样的整个css字符串。它不返回正在使用的实际字体。
额外 作者 Tom Kincaid,

@pat实际上,Safari不会提供使用的字体,Safari至少在我的经验中总是返回堆栈中的第一个字体,无论它是否已安装。

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

假设Helvetica是安装/使用的,你会得到:

  • Safari中的“我的假字体”(我相信其他webkit浏览器)。
  • 在Gecko浏览器和IE中,“我的假字体,helvetica,san-serif”。
  • <9> Opera 9中的“helvetica”,尽管我读到他们正在改变Opera 10的配置 壁虎。

我在这个问题上做了一个通过,并创建了Font Unstack,它测试了堆栈中的每种字体并返回第一个安装的字体。它使用@MojoFilter提到的技巧,但只有在安装了多个时才返回第一个。虽然它确实遭受了@tlrobinson提及的弱点(Windows将默默地替代Arial for Helvetica并报告已安装Helvetica),但它运行良好。

FontUnstack

0
额外

简化形式是:

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

如果您需要更完整的内容,请查看

0
额外

有一个简单的解决方案

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

这个功能将正是你想要的。执行时它将返回用户/访问者浏览器字体类型。希望这会有所帮助

0
额外
最可能的原因是,这只会检查一组字体,如果没有字体设置,它可能使用Arial作为字体。
额外 作者 Josiah,
我试图在Safari上的一个元素,肯定有Arial字体,我得到“”作为字体。任何想法为什么?
额外 作者 Alessandro Vermeulen,

另一种解决方案是通过 @ 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");
}

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

0
额外

Calibri是Microsoft拥有的一种字体,不应免费发布。而且,要求用户下载特定的字体并不是非常用户友好的。

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

0
额外
我建议您在购买任何内容之前查看 Google字体以获取类似内容。
额外 作者 OJFord,
+1用于字体嵌入。这解决了这个问题,而不必检测任何东西。
额外 作者 Andrew Grothe,
除此之外,如果用户在Windows机器上,他们可以查看Calibri。这是回退列表的完整点。
额外 作者 dudewad,
你的答案与这个问题无关,应该是一个评论。
额外 作者 dudewad,