如何检测网页中使用了哪一个定义的字体?

javascript html css fonts

44617 观看

11回复

28620 作者的声誉

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

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

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

编辑让人想知道为什么我要这样做:我检测的字体包含其他字体不可用的字形,当用户没有字体时我想显示一个链接,要求用户下载该字体,以便他们可以使用我的Web应用程序与正确的字体。

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

作者: Pat 的来源 发布者: 2008 年 8 月 3 日

回应 (11)


64

6312 作者的声誉

决定

我已经看到它以一种不确定但非常可靠的方式完成。基本上,元素设置为使用特定字体,并且字符串设置为该元素。如果元素的字体集不存在,则采用父元素的字体。因此,他们所做的是测量渲染字符串的宽度。如果它与期望的字体相对于派生字体的预期匹配,则它存在。这对等宽字体不起作用。

这里是它的来源: Javascript / CSS字体检测器(ajaxian.com; 2007年3月12日)

作者: MojoFilter 发布者: 03.08.2008 09:51

7

2916 作者的声誉

一种有效的技术是查看元素的计算样式。这在Opera和Firefox中得到了支持(我在safari中进行了重新调试,但尚未测试)。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,最后,系统默认sans-serif字体的名称。请注意,CSS声明中字体的排序很重要。

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

作者: runeh 发布者: 25.08.2008 10:16

8

2070 作者的声誉

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

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

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

  • Safari中的“我的假字体”(我相信其他webkit浏览器)。
  • Gecko浏览器和IE中的“我的假字体,helvetica,san-serif”。
  • Opera 9中的“helvetica”虽然我读到他们正在改变Opera 10中的这个以匹配Gecko。

我对这个问题进行了传递并创建了Font Unstack,它测试堆栈中的每个字体并仅返回第一个安装的字体。它使用了@MojoFilter提到的技巧,但只安装了多个,只返回第一个。虽然它确实遭受了@tlrobinson提到的弱点(Windows将默默地用Arial代替Helvetica并报告安装了Helvetica),但它的效果还是不错的。

FontUnstack

作者: philoye 发布者: 20.05.2009 10:57

28

62312 作者的声誉

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

github上的 jFont Checker

作者: Derek 朕會功夫 发布者: 21.05.2011 05:58

7

89 作者的声誉

简化形式是:

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

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

作者: Facebiz 发布者: 23.10.2011 01:32

8

1763 作者的声誉

有一个简单的解决方案

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

这个功能将完全按照你的意愿行事。执行时它将返回用户/访问者浏览器字体类型。希望这会有所帮助

作者: Naeem Ul Wahhab 发布者: 29.11.2011 08:40

6

69 作者的声誉

另一种解决方案是自动安装字体,通过@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文件才能最好地工作。

作者: PaulnOZ 发布者: 05.01.2012 11:19

2

176 作者的声誉

Calibri是Microsoft拥有的字体,不应免费分发。此外,要求用户下载特定字体不是非常用户友好的。

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

作者: Mark Kimitch 发布者: 14.11.2012 06:56

1

448 作者的声誉

您可以使用本网站:

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

它完全符合你的要求......

作者: user2267379 发布者: 11.04.2015 08:41

0

2468 作者的声誉

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

https://fount.artequalswork.com/

作者: Woppi 发布者: 13.03.2017 04:31

0

11188 作者的声誉

您可以在要查看的字体后面的字体系列中放置Adobe Blank,然后不会呈现任何不在该字体中的字形。

例如:

font-family: Arial, 'Adobe Blank';

据我所知,没有JS方法可以判断元素中的哪些字形是由该元素的字体堆栈中的哪种字体呈现的。

由于浏览器具有serif / sans-serif / monospace字体的用户设置,并且它们也有自己的硬编码后备字体,如果在任何字体中找不到字形,它们将使用这一点,这很复杂。字体堆栈。因此,浏览器可能会以不在字体堆栈或用户浏览器字体设置中的字体呈现某些字形。 Chrome开发工具将显示所选元素中字形的每种渲染字体。因此,在您的机器上,您可以看到它正在做什么,但无法分辨用户机器上发生了什么。

用户的系统也可能在其中起作用,例如Window在字形级别进行字体替换

所以...

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

如果你想在JS中测试它,你可以使用包括Adobe Blank在内的font-family渲染单个字形并测量它们的宽度以查看它是否为零,但是你必须遍历每个字形和你要测试的每个字体,但是虽然你可以知道元素字体堆栈中的字体,但是无法知道用户浏览器配置使用的字体,因此对于至少一些用户来说,你迭代的字体列表将是不完整的。(如果新字体出现并开始使用,它也不是未来的证据。)

作者: Sam Hasler 发布者: 30.11.2017 10:58
32x32