blocks|key|1862241|text|我看到它是以一种可疑的，但相当可靠的方式完成的。基本上，将一个元素设置为使用特定的字体，并将一个字符串设置为该元素。如果为元素设置的字体不存在，它将采用父元素的字体。所以，他们所做的就是测量渲染字符串的宽度。如果它符合他们对所需字体的期望，而不是派生字体，那么它就存在。这对等宽字体不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1862242|这是它的出处：Javascript/CSS+Font+Detector+(ajaxian.com;+12+Mar+2007)|offset|length|1862243|entityMap|0|LINK|mutability|MUTABLE|url|http://ajaxian.com/archives/javascriptcss-font-detector^0|0|7|1J|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

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.

Here's where it came from:
<a href="http://ajaxian.com/archives/javascriptcss-font-detector" rel="noreferrer">Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)</a>

blocks|key|2076156|text|一种可行的技术是查看元素的计算样式。这在Opera和Firefox中是受支持的(我在safari中进行了研究，但还没有测试过)。IE+(至少是7)提供了一种获取样式的方法，但它似乎是样式表中的样式，而不是计算样式。有关quirksmode模式的更多详细信息：Get+Styles|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2076157|下面是一个简单的函数，用于获取元素中使用的字体：|2076158|/**
+*+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;
++++}
}|code-block|syntax|javascript|2076159|如果它的CSS规则是：|2076160|#fonttester+{
++++font-family:+sans-serif,+arial,+helvetica;
}|2076161|如果安装了helvetica，那么它应该返回helvetica，如果没有安装，则返回arial，最后返回系统默认sans-serif字体的名称。请注意，CSS声明中的字体顺序非常重要。|2076162|一个有趣的技巧，你也可以尝试创建许多隐藏元素与许多不同的字体，试图检测哪些字体安装在机器上。我相信有人可以用这种技术制作一个漂亮的字体统计信息收集页面。|2076163|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/getstyles.html^0|3L|A|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: <a href="http://www.quirksmode.org/dom/getstyles.html" rel="noreferrer">Get Styles</a>

Here's a simple function to grab the font used in an element:

<pre><code>/**
 * 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;
 }
}
</code></pre>

If the CSS rule for this was:

<pre><code>#fonttester {
 font-family: sans-serif, arial, helvetica;
}
</code></pre>

Then it should return helvetica if that is installed, if not, arial, and lastly, the name of the system default sans-serif font. Note that the ordering of fonts in your CSS declaration is significant.

An interesting hack you could also try is to create lots of hidden elements with lots of different fonts to try to detect which fonts are installed on a machine. I'm sure someone could make a nifty font statistics gathering page with this technique.

blocks|key|1862371|text|一个简化的形式是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1862372|function+getFont()+{
++++return+document.getElementById('header').style.font;
}|code-block|syntax|javascript|1862373|如果您需要更完整的内容，请查看this。|offset|length|1862374|entityMap|0|LINK|mutability|MUTABLE|url|http://www.lalit.org/lab/javascript-css-font-detect/#comment-43^0|0|0|F|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

A simplified form is:

<pre><code>function getFont() {
 return document.getElementById('header').style.font;
}
</code></pre>

If you need something more complete, check <a href="http://www.lalit.org/lab/javascript-css-font-detect/#comment-43" rel="noreferrer">this</a> out.

blocks|key|1862501|text|有一个简单的解决方案--只需使用element.style.font|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1862502|function+getUserBrowsersFont()+{
++++var+browserHeader+=+document.getElementById('header');
++++return+browserHeader.style.font;
}|code-block|syntax|javascript|1862503|此函数将完全执行您想要的操作。在执行时，它将返回用户/浏览器的字体类型。希望这能有所帮助。|1862504|entityMap^0|G|I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

There is a simple solution - just use <code>element.style.font</code>:

<pre><code>function getUserBrowsersFont() {
 var browserHeader = document.getElementById('header');
 return browserHeader.style.font;
}
</code></pre>

This function will exactly do what you want. On execution It will return the font type of the user/browser. Hope this will help.

blocks|key|2076287|text|另一种解决方案是通过@font-face自动安装字体，这可能会消除检测的需要。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2076288|@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");
}|code-block|syntax|javascript|2076289|当然，它不会解决任何版权问题，但是你可以随时使用免费的字体，甚至可以自己制作字体。您需要同时使用.eot和.ttf文件才能工作得更好。|2076290|entityMap^0|A|A|0|0|1C|4|1H|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Another solution would be to install the font automatically via <code>@font-face</code> which might negate the need for detection.
<pre class="lang-css prettyprint-override"><code>@font-face {
 font-family: &quot;Calibri&quot;;
 src: url(&quot;http://www.yourwebsite.com/fonts/Calibri.eot&quot;);
 src: local(&quot;Calibri&quot;), url(&quot;http://www.yourwebsite.com/fonts/Calibri.ttf&quot;) format(&quot;truetype&quot;);
}
</code></pre>
Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both <code>.eot</code> &amp; <code>.ttf</code> files to work best.

blocks|key|2076304|text|Calibri是微软所有的字体，不应该免费分发。此外，要求用户下载一种特定的字体也不是很友好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2076305|我建议购买字体许可证并将其嵌入到您的应用程序中。|2076306|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Calibri is a font owned by Microsoft, and shouldn't be distributed for free. Also, requiring a user to download a specific font isn't very user-friendly. 

I would suggest purchasing a license for the font and embedding it into your application.

blocks|key|1862560|text|您可以使用此网站：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1862561|http://website-font-analyzer.com/|offset|length|1862562|它做的正是你想要的.|1862563|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

You can use this website :

<a href="http://website-font-analyzer.com/" rel="nofollow noreferrer">http://website-font-analyzer.com/</a>

It does exactly what you want...

blocks|key|1862566|text|我正在使用Fount。你只需将字体按钮拖到你的书签栏上，点击它，然后点击网站上的特定文本即可。然后，它将显示该文本的字体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1862567|https://fount.artequalswork.com/|offset|length|1862568|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

I am using Fount. You just have to drag the Fount button to your bookmarks bar, click on it and then click on a specific text on the website. It will then show the font of that text. 

<a href="https://fount.artequalswork.com/" rel="nofollow noreferrer">https://fount.artequalswork.com/</a>

Suppose I have the following CSS rule in my page:
<pre class="lang-css prettyprint-override"><code>body {
 font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
</code></pre>
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.

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

假设我的页面中有以下CSS规则：body {    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;}如何检测在用户浏览器中使用了哪种已定义的字体？对于想知道我为什么要这样做的人来说，是因为我检测到的字体包含其他字体中没有的字形。如果用户没有该字体，那...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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