首页 / 知识

关于javascript：如何检测网页中使用了哪种定义的字体？

2023-04-11 14:11:00

How to detect which one of the defined font was used in a web page?

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

1
2
3

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

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

对于想知道为什么要这样做的人来说，是因为我检测到的字体包含其他字体不可用的字形。如果用户没有字体，那么我希望它显示一个链接，要求用户下载该字体(以便他们可以将我的Web应用程序使用正确的字体)。

当前，我正在向所有用户显示下载字体链接。我只想为未安装正确字体的人显示此内容。

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

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

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

github上的jFont Checker

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

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

假设已安装/使用Helvetica，您将得到：

Safari(我相信其他Webkit浏览器)中的"我的假字体"。
Gecko浏览器和IE中的"我的假字体Helvetica San-Serif"。
Opera 9中的" helvetica"，尽管我读到他们正在Opera 10中对其进行更改以匹配
壁虎。

我通过了这个问题，并创建了Font Unstack，它测试堆栈中的每种字体并仅返回安装的第一个字体。它使用@MojoFilter提到的技巧，但是如果安装了多个，则仅返回第一个。尽管它确实遭受了@tlrobinson提到的弱点(Windows将用Arial代替Helvetica并报告已安装Helvetica)，但否则效果很好。

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

1
2
3
4

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

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

一种有效的技术是查看元素的计算样式。 Opera和Firefox支持此功能(我在Safari中进行了侦察，但尚未测试)。 IE(至少为7)提供了一种获取样式的方法，但似乎是样式表中的内容，而不是计算出的样式。有关quirksmode的更多详细信息：获取样式

这是获取元素中使用的字体的简单函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
* 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规则是：

1
2
3

#fonttester {
font-family: sans-serif, arial, helvetica;
}

然后，如果已安装helvetica，则应返回helvetica，如果没有，则返回arial，最后返回系统默认的sans-serif字体的名称。请注意，CSS声明中的字体顺序很重要。

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

简化形式为：

1
2
3

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

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

另一种解决方案是通过@font-face自动安装字体，这可能不需要检测。

1
2
3
4
5

@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

网页检测字体哪种