如何检测网页中使用了哪一种定义的字体? [英] 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 could I detect which one of the defined fonts were used in the user's browser?

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

For people wondering why I want to do this is because the font I'm detecting contains glyphs that are not available in other fonts. If the user does not have the font, then I want it 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. This won't work for monospaced fonts.

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

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