代码之家 › 专栏 › 技术社区 › Pat

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

fonts css html javascript

117

Pat · 技术社区 · 16 年前

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

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

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

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

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

11 回复 | 直到 6 年前

hakre 13 年前

我看到它是以一种不确定但相当可靠的方式完成的。基本上,元素被设置为使用特定的字体,字符串被设置为该元素。如果为元素设置的字体不存在,则采用父元素的字体。所以,它们所做的就是测量渲染字符串的宽度。如果它与所需字体的预期匹配,而不是与派生字体匹配,那么它就存在了。

这是它的来源: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Derek ææåå¤« 9 年前

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

jFont Checker 吉瑟布论

CloudyMarble 11 年前

有一个简单的解决方案

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

这个函数将完全满足您的需要。执行时,它将返回用户/访问者浏览器的字体类型。希望这会有帮助

elreeda 8 年前

@实际上,safari并没有给出所使用的字体,safari总是返回堆栈中的第一个字体,不管它是否安装,至少在我的经验中是这样。

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

假设Helvetica是安装/使用的,您将得到:

Safari中的“我的假字体”(我相信其他Webkit浏览器)。
Gecko浏览器和IE中的“我的假字体,Helvetica,san-serif”。
歌剧9中的“海尔韦提卡”,尽管我读到他们在歌剧10中把这个改成了匹配的。壁虎。

我通过了这个问题,创建了字体unstack,它测试堆栈中的每个字体,并只返回第一个安装的字体。它使用@mojofilter提到的技巧,但只有在安装了多个的情况下才返回第一个技巧。虽然它确实遭受了@tlrobinson提到的弱点(Windows会悄悄地用Arial代替Helvetica,并报告已经安装了Helvetica),但它在其他方面工作得很好。

FontUnstack

Danilo Valente 12 年前

简化形式是:

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

如果您需要更完整的内容,请检查 this 出来。

runeh 11 年前

一种有效的技术是查看元素的计算样式。这在Opera和Firefox中得到支持(我在Safari中侦察,但还没有测试)。IE(至少7)提供了一个获取样式的方法,但它似乎是样式表中的任何内容,而不是计算出来的样式。有关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,则返回helvetica;如果没有,则返回arial;最后,返回系统默认sans-serif字体的名称。请注意,CSS声明中字体的顺序非常重要。

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

CloudyMarble 11 年前

另一个解决方案是通过 @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 最有效的文件。

CloudyMarble 11 年前

Calibri是微软所有的字体,不应该免费分发。另外,要求用户下载特定的字体并不是很方便用户使用。

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

hardkoded 7 年前

您可以使用此网站:

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

这正是你想要的…

Woppi 7 年前

我用的是fount。你只需要把fount按钮拖到书签栏上,点击它,然后点击网站上的特定文本。然后它将显示该文本的字体。

https://fount.artequalswork.com/

Sam Hasler 7 年前

你可以放 Adobe Blank 在字体系列中,在您要查看的字体之后,任何不在该字体中的字形都不会被呈现。

例如。:

font-family: Arial, 'Adobe Blank';

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

这很复杂,因为浏览器有serif/sans-serif/monospace字体的用户设置,并且他们也有自己的硬编码的回退字体,如果在字体堆栈中的任何字体中都找不到glyph,他们将使用这些字体。 因此,浏览器可能会以不在字体堆栈或用户浏览器字体设置中的字体呈现一些字形。 Chrome Dev Tools will show you each rendered font for the glyphs in the selected element . 所以在你的机器上你可以看到它在做什么,但是没有办法知道用户的机器上发生了什么。

用户的系统也可能参与其中,例如 Window does Font Substitution 在glyph级别。

所以…

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

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