首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何检测网页中使用了哪种已定义的字体?

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

Stack Overflow用户
提问于 2008-08-03 21:42:38
回答 8查看 52.4K关注 0票数 152

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

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

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

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

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

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2008-08-03 21:51:44

我看到它是以一种可疑的,但相当可靠的方式完成的。基本上,将一个元素设置为使用特定的字体,并将一个字符串设置为该元素。如果为元素设置的字体不存在,它将采用父元素的字体。所以,他们所做的就是测量渲染字符串的宽度。如果它符合他们对所需字体的期望,而不是派生字体,那么它就存在。这对等宽字体不起作用。

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

票数 80
EN

Stack Overflow用户

发布于 2008-08-25 22:16:22

一种可行的技术是查看元素的计算样式。这在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声明中的字体顺序非常重要。

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

票数 10
EN

Stack Overflow用户

发布于 2011-10-23 21:32:13

一个简化的形式是:

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

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

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/845

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档