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

Translate

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

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

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

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

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

This question and all comments follow the "Attribution Required."

所有的回答

Translate

我已经看到它以一种不稳定但相当可靠的方式完成了。基本上,将元素设置为使用特定字体,并为该元素设置字符串。如果为元素设置的字体不存在,则采用父元素的字体。因此,他们要做的是测量渲染字符串的宽度。如果它与期望字体(与派生字体相对)相符,则表示存在。这不适用于等宽字体。

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

来源
Translate

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

jFont Checker在github上

来源
Translate

@pat实际上,Safari不会提供所使用的字体,至少我认为,无论是否安装了Safari,Safari始终会返回堆栈中的第一个字体。

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

假设Helvetica是已安装/已使用的设备,您将获得:

  • Safari(我相信其他Webkit浏览器)中的“我的假字体”。
  • Gecko浏览器和IE中的“我的假字体helvetica,san-serif”。
  • Opera 9中的“ helvetica”,尽管我读到他们正在Opera 10中对其进行更改以匹配Gecko。

我通过了这个问题,并创建了字体解叠,它会测试堆栈中的每种字体,并仅返回安装的第一个字体。它使用@MojoFilter提到的技巧,但是如果安装了多个,则仅返回第一个。尽管它确实遭受了@tlrobinson提到的弱点(Windows将用Arial代替Helvetica并报告已安装Helvetica),但它还是可以正常工作的。

来源
Translate

简化形式为:

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

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

来源
Translate

一种有效的技术是查看元素的计算样式。 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,则应返回helvetica,否则返回arial,最后返回系统默认的sans-serif字体的名称。请注意,CSS声明中的字体顺序很重要。

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

来源
Translate

有一个简单的解决方案-只需使用element.style.font:

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

该功能将完全满足您的要求。执行时,它将返回用户/浏览器的字体类型。希望这会有所帮助。

来源
Translate

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

来源
Translate

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

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

来源
Translate

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

https://fount.artequalswork.com/

来源
Translate

您可以使用此网站:

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

正是您想要的...

来源
Translate

你可以放Adobe空白在您要查看的字体之后的字体系列中,然后将不呈现该字体之外的任何字形。

例如:

font-family: Arial, 'Adobe Blank';

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

浏览器具有衬线/无衬线/等宽字体的用户设置,并且它们也具有自己的硬编码后备字体,如果在字体中的任何字体中都找不到字形,则将使用它们,这使情况变得复杂。字体栈。因此,浏览器可能会使用不在字体堆栈或用户浏览器字体设置中的字体来渲染某些字形。 Chrome开发工具会为您显示所选元素中字形的每种渲染字体。因此,在您的计算机上,您可以看到它在做什么,但是无法分辨用户计算机上正在发生的事情。

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

所以...

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

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

来源