如何检测网页中使用了哪一个定义的字体？ [英] How to detect which one of the defined font was used in a web page?

问题描述

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

Suppose I have the following CSS rule in my page:

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

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

How can I detect which one of the defined fonts was used in the user's browser?

为想知道我为什么要这样做的人编辑：我检测到的字体包含其他字体无法提供的字形和当用户没有字体时，我想显示一个链接，要求用户下载该字体，以便他们可以使用我的网络应用程序使用正确的字体。

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

目前我我显示所有用户的下载字体链接，我想只为没有安装正确字体的人显示。

Currently I am displaying the download font link for all users, I want to only display this for people who do not have the correct font installed.

推荐答案

<我已经看到它以一种不确定但非常可靠的方式完成。基本上，元素设置为使用特定字体，并且字符串设置为该元素。如果元素的字体集不存在，则采用父元素的字体。因此，他们所做的是测量渲染字符串的宽度。如果它与他们对所需字体的期望值相匹配而不是派生字体，那么它就会出现。

I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present.

以下是它的来源：
Javascript / CSS字体检测器（ajaxian.com; 2007年3月12日）

这篇关于如何检测网页中使用了哪一个定义的字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！