如何检测的哪一个定义的字体使用一个网页吗?

StackOverflow https://stackoverflow.com/questions/845

  •  08-06-2019
  •  | 
  •  

题

假设我有以下CSS规则在我的网页:

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

我怎么可以探测的哪一个定义的字体是用于用户浏览器？

编辑人想知道为什么我要这样做： 字体我检测包含字形的，不提供其它的字体，当用户不具有所的字体，我想显示的链接，要求用户下载的字体，这样他们可以用我的网页应用程序有正确的字体。

目前我是显示下载的字体链接的所有用户，我要仅显示这些人没有正确的字体安装。

有帮助吗？

解决方案

我看见它在一种前途未卜，但是很可靠的方式。基本上，一个元件的设置使用的特定字号和字符串设置这个元素。如果设置的字体的元素不存在，它采用的字体的父元。那么，什么他们做的是测量该宽度呈现的串。如果它配什么，他们预计对所需的字体而不是衍生的字体，它的存在。这不会的工作等宽字体。

这是从哪里来的:Javascript/CSS字体探测器(ajaxian.com;12Mar2007)

其他提示

我写了一个简单的JavaScript工具，可以用它来检查，如果一个字体是否安装）。
它使用简单的技术和应纠正的大部分时间。

jFont检查 上。

@pat实际上，野生动物不得用的字体、野生动物园，而不是总是返回的第一个字体在该堆不管它是否安装了，至少我的经验。

font-family: "my fake font", helvetica, san-serif;

假设Helvetica是一个安装/使用，你会得到：

  • "我的假字体"在野生动物园(而且我相信其他。浏览器)。
  • "我的假字体，helvetica、圣衬线"在壁虎的浏览器和IE。
  • "helvetica"在歌剧9，虽然我读，他们是改变这个在歌剧10匹配 壁虎。

我参加了一个传递在这个问题，并创造 字体解散, 测试每个字体在一堆和返回的第一个安装了一只。它使用的伎俩，@MojoFilter提到，但只有返回的第一个如果多次的安装。虽然它不会遭受的弱点，@tlrobinson提到(Windows将替代Arial为Helvetica默默地报告说，Helvetica是安装的)，否则运作良好。

一个简单的形式是：

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

如果你需要更多的东西完成，检查 此 出。

一个技术工作的是来看看计算的风格元。这是支持在歌剧和火狐(和我的侦察在野生动物园，但没有测试).IE(7至少)，提供了一种方法来获得一个风格的，但它似乎是无论是在的样式表中，未计算的风格。更多详细信息quirksmode: 获得风格

这里有一个简单的功能抓住使用的字体中的一个元素：

/**
 * 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，以及最后，该系统名称默认的无衬线字体。注意，所订购的字体在CSS宣言》是重要的。

一个有趣的哈克你也可以尝试创建很多隐藏的因素有很多不同的字体来试试，以检测其中的字体上安装的一台机器。我敢肯定有人可以让一个漂亮的字体的统计数据收集网页与这种技术。

另一种解决办法是安装自动通过的字体 @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 文件的工作最好的。

有一个简单的解决办法-仅仅使用 element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

这一功能将确切地做你想要什么。在执行这将返回的字体类型的用户/用户浏览器。希望这将有所帮助。

宋体字体所拥有的微软，不应该免费发放。此外，需要一个用户下载的一个具体的字体是不是很用户友好。

我建议购买许可证的字体，并将它嵌入到应用程序。

我使用的源泉.你只需要拖的源泉按钮你的书签吧，点击它然后点击一个具体的案文在网站上。然后，它将表明对字体的案文。

https://fount.artequalswork.com/

你可以使用这个网站：

http://website-font-analyzer.com/

这不正是你想要什么...

你可以把 Adobe空白 在字体家庭之后的字体，你想要看到的，然后任何形不在于字体不会被渲染。

例如：

font-family: Arial, 'Adobe Blank';

如我所知，没有JS的方法来告诉其形中的一个元素是正在呈现的它的字体的字体堆对这个元素。

这是复杂的事实，浏览器具有的用户设置的衬线/无衬线/等宽字体，他们也有自己的硬编码下的字体，他们将使用，如果一个字中没有发现任何字体在一个字体堆。 因此浏览器可能呈现一些字形的字体，不在字体堆或用户浏览的字体设置。 铬开发工具会给你每个呈现的字体字在选定的元素.所以你的机器上可以看看它在做什么，但是没办法告诉什么在用户的计算机上。

这也有可能用户的系统可以在此发挥作为例如 窗口不会替代字体 在符的水平。

所以...

为字你有兴趣，你有没有办法知道他们是否将通过的用户浏览器/系统的后退，即使他们没有字体的指定。

如果你想要测试它在JS你可能会使各个字一个字体家庭，包括Adobe空白和衡量他们的宽度来看看它是否为零， 但 你必须循环彻底的每个字和 每个字体你想测试, 但虽然你就可以知道字体中的一个元素的字体堆，没有办法知道什么样的字体的用户浏览器构成为使用，因此为至少一些你的用户名单的字体，你迭代将是不完整的。(它也没有未来证明，如果新的字体出来，并开始获得使用。)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top