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

bipsam 发布于 2018-02-05 css 最后更新 2018-02-05 01:05 711 浏览

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

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
如何检测在用户的浏览器中使用了哪一种定义的字体? 编辑为人们想知道为什么我想这样做:我检测到的字体包含其他字体中不可用的字形,当用户没有字体时,我想显示一个链接询问用户下载该字体,以便他们可以使用我的Web应用程序与正确的字体。 目前我正在显示所有用户的下载字体链接,我只想显示这个没有安装正确的字体的人。
已邀请:

zin

赞同来自:

我已经看到它做了一个有限的,但非常可靠的方式。基本上,一个元素被设置为使用特定的字体和一个字符串被设置为该元素。如果为该元素设置的字体不存在,则采用父元素的字体。所以,他们做的是测量渲染字符串的宽度。如果它与期望的字体匹配,而不是衍生的字体,则它是存在的。 这是来自哪里: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

qea

赞同来自:

有效的技术是查看元素的计算风格。这是在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,如果没有,则为arial,最后是系统默认的sans-serif字体的名称。请注意,您的CSS声明中的字体排序是重要的。 一个有趣的黑客你也可以尝试创建大量不同字体的隐藏元素,试图检测在机器上安装的字体。我敢肯定,有人可以用这种技术做一个漂亮的字体统计收集页面。

qet

赞同来自:

Safari不提供使用的字体,Safari至少在我的经验中总是返回堆栈中的第一个字体,不管它是否被安装。

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已经安装),但是它运行良好。 FontUnstack

dab

赞同来自:

我写了一个简单的JavaScript工具,可以用它来检查字体是否安装 它使用简单的技术,大部分时间应该是正确的。 点击 github上的 jFont Checker

yet

赞同来自:

简化的形式是:

function getFont() {
    return document.getElementById('header').style.font;
}
如果您需要更完整的内容,请检查this

icum

赞同来自:

有一个简单的解决方案

function getUserBrowsersFont() 
{
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}
这个功能将会正是你想要的。执行时它将返回用户/访问者浏览器字体类型。希望这会有所帮助

lsunt

赞同来自:

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

xminus

赞同来自:

Calibri是Microsoft拥有的一种字体,不应该免费发布。另外,要求用户下载特定的字体不是非常用户友好的。 我会建议购买字体的许可证,并将其嵌入到您的应用程序中。

dsit

赞同来自:

你可以使用这个网站: http://website-font-analyzer.com/ 它正是你想要的...

ramet

赞同来自:

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

yeum

赞同来自:

你可以把Adobe Blank放在你想看的字体后面的font-family中,然后任何不在这个字体中的字形都不会被渲染。 例如。:

font-family: Arial, 'Adobe Blank';
据我所知,有没有JS方法来告诉元素中的哪些字形正在由该元素的字体堆栈中的哪种字体呈现。 浏览器具有用于serif/sans-serif/monospace字体的用户设置,并且它们也具有它们自己的硬编码的后退字体,如果在字体中没有任何字体字体堆栈。 因此,浏览器可能会呈现某些不在字体堆栈或用户浏览器字体设置中的字体。 Chrome Dev Tools will show you each rendered font for the glyphs in the selected element。所以在你的机器上,你可以看到它在做什么,但是没有办法知道用户机器上发生了什么。 用户的系统也可以参与其中,例如,字形级别的Window does Font Substitution。 所以... 对于您感兴趣的字形,即使没有您指定的字体,也无法知道它们是否会被用户的浏览器/系统回退渲染。 如果你想在JS中测试它,你可以使用包括Adobe Blank在内的字体系列渲染单个字形,并测量它们的宽度以确定它是否为零,但是必须遍历每个字形, 您想要测试的每种字体,但是尽管您可以知道元素字体堆栈中的字体,但无法知道用户的浏览器配置为使用哪种字体,因此至少对某些用户来说你迭代的字体列表将是不完整的。 (如果新字体出来并开始使用,这也不是未来的证明。)