Question

是否有办法根据用户是否具有某种字体（最好不使用javascript）来更改HTML文件中显示的文本？

例如，如果有字体'AlphaIcons'，我想显示：

<span>A</span>

否则我想显示：

<span><img src="apple.png">Apple</span>

（在这种情况下，将字体提供给没有它的用户）。

Answer 1

EDITED *** 看看这篇文章 - 它可能会引导你朝着正确的方向前进： Changing Body Font-Size based on Font-Family with jQuery

在第一个答案中，它提供了一个可以检测字体的新库。如果你可以给它一个真/假布尔值，那么你可以写一个图像交换。

我相信CSS已经可以为你做这件事，使用font-family优先考虑你想要使用的字体。如果它找不到用户系统上的第一个字体，则会转到下一个字体。

http://www.w3schools.com/css/css_font.asp

只需使用css：

span {
    font-family:"AlphaIcons", "Times New Roman", Times, serif;
}

或者我错过了什么？

如果你想使用javascript做一些更好的字体，请查看Google的webfont库： http://www.google.com/webfonts

Answer 2

您无法使用纯HTML或CSS进行检查。您需要 Javascript来处理此问题。

执行以下步骤：

通过font-face
使用javascript检测客户端浏览器中是否可以使用font-face。例如modernizr可以做到这一点
当font-face不可用时，请使用以下代码将图像插入范围：

<强> HTML

<span data-image="apple.png">A</span>

<强> javascipt的

// check font face compatibility
if (!Modernizr.fontface) {

    // replace each span content with the right image
    $('span').each(function(){

        // get the image 
        var image = $(this).data('image');

        // insert this image into the span tag  
        $(this).html('<img src="'+image+'" />');
    });
}

数据属性只是众多可能解决方案中的一种。只是一点点暗示。

一般来说，没有方法可以在没有Javascript的情况下检查字体的可用性。

如果font-face不存在，CSS更改文本？

2 个答案: