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

Question

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

例如，如果我想显示一个字体“AlphaIcons”：

<span>A</span>

其他我想显示的：

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

（在这种情况下，将字体提供给没有字体的用户不是一种选择）。

Answer 1

已编辑*** 看看这篇文章——它可能会引导你朝着正确的方向前进： 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 检测客户端浏览器中的字体是否可用。例如modernizr 可以解决问题
• 当 font-face 不可用时，使用以下代码将图像插入到 span 中：

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 就无法检查字体的可用性。