如果字体不可用，有没有办法隐藏文本？答案

【问题标题】：Is there a way to hide text if a font is unavailable?如果字体不可用，有没有办法隐藏文本？
【发布时间】：2011-08-22 18:38:58
【问题描述】：

我想编写使用 Webdings 字形的优雅降级代码。假设 Webdings 是 universally available across platforms 的字体之一，但如果出于某种奇怪的原因 Webdings 不存在，我不希望浏览器以默认字体显示字符。

有什么办法吗？

【问题讨论】：

您应该使用@font-face 来嵌入备用字体。这比隐藏文本要好得多，而且它适用于“所有浏览器”。
你是对的 - 这确实是最符合问题精神的解决方案。把这个写出来作为答案，我会接受的。

标签： html css fonts

【解决方案1】：

正如我在评论中所说：

您应该使用@font-face 来嵌入备用字体。这比隐藏文本要好得多，而且它适用于“所有浏览器”。

我更喜欢使用Font Squirrel Generator 来处理@font-face。它使它非常非常容易。

【讨论】：

【解决方案2】：

你可以用 jQuery 做这样的事情：

$('p').each(function(){
    var s = $(this).css('font-family');
    if(s != "verdana"){
        $(this).hide();
    }    
});

示例：http://jsfiddle.net/jasongennaro/GXjvK/

所以你检查元素的字体。如果它不存在，你就隐藏它。

【讨论】：

这不起作用 - 如果你将 CSS 设置为 Verdana，并且如果 Verdana 实际上不可用，jQuery 仍会将 CSS 报告为“Verdana”。
此脚本从样式表中读取，这并不表示字体的可用性。

【解决方案3】：

在 JavaScript 中没有测试字体可用性的本地方法。

然而，正如lalit 所意识到的那样，由于“每个字符在不同字体中的出现不同，对于相同字体大小的相同字符串，不同字体将采用不同的宽度和高度”。

他写了一篇不错的文章，并为此创建了一段不错的代码：http://www.lalit.org/lab/javascript-css-font-detect/

【讨论】：

链接断开？ :(
@KyleMcClellan 快速搜索在这里找到了相同的代码：github.com/adrienthiery/lalit-js-font-detector

【解决方案4】：

只有 Flash 允许您检测计算机上安装了哪些字体。那里有一篇博客文章展示了如何在 Flash 中获取字体列表并将该列表传递给 JavaScript。一旦你在 JavaScript 中拥有它，隐藏/显示文本应该很容易：

http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/

【讨论】：

【解决方案5】：

您可以使用 CSS3 属性在您的网站上设置字体，这意味着所有拥有 CSS3 兼容网络浏览器的人都会看到您希望的“文本”。

@font-face {
 font-family: myFirstFont; /* in your case webdings */
 src: url('Sansation_Light.ttf'),
 url('Sansation_Light.eot') format("opentype"); /* IE */
}

我现在唯一关心的是版权，我不知道你是否应该拥有这种字体的权利才能以这种方式使用它……

【讨论】：