Question

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

有没有办法做到这一点？

Answer 1

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

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

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

所以你检查一下这个元素的字体。如果不存在，则隐藏它。

Answer 2

正如我在评论中所说：

您应该使用@font-face来嵌入后备字体，而不是那样。这比隐藏文本要好得多，而且它在“全部”中起作用浏览器”。

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

Answer 3

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

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

Answer 4

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

但是，正如lalit已经意识到的那样，由于“每个字符在不同字体中的显示方式不同，因此对于相同字体大小的相同字符串，不同的字体将采用不同的宽度和高度”。

他写了一篇很好的文章，并创建了一段不错的代码来做到这一点：http://www.lalit.org/lab/javascript-css-font-detect/

Answer 5

您可以使用CSS3属性在您的网站上显示该字体，这意味着所有拥有CSS3兼容网络浏览器的人都会看到您想要的“文字”。

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

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

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

5 个答案: