Html 如果字体不存在，CSS是否更改文本？

有没有一种方法可以根据用户是否有特定的字体（最好没有javascript）来更改HTML文件中显示的文本

例如，如果我想显示一个字体“字母图标”：

<span>A</span>

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

A

否则，我要显示：

<span>A</span>

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

苹果公司

---

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

您不能用纯HTML或CSS检查这一点。您需要Javascript来处理此问题

请执行以下步骤：

• 通过字体嵌入字体文件
• 使用javascript在客户端浏览器中检测字体是否可用。e、 我能做到这一点
• 当字体面不可用时，使用以下代码将图像插入跨度：

HTML

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

A

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+'" />');
    });
}

//检查字体与字体的兼容性
如果（！modernizer.fontface）{
//用右侧图像替换每个范围内容
$（'span'）。每个（函数（）{
//获取图像
var image=$（this.data（'image'）；
//将此图像插入span标记
$（this.html（“”）；
});
}

数据属性只是许多可能的解决方案之一。只是一点提示

一般来说，没有Javascript就没有检查字体可用性的方法。

*** 看看这篇文章——它可能会引导你走向正确的方向：

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

---

我相信CSS已经可以为您做到这一点，使用字体系列会优先考虑您想要使用的字体。如果在用户系统上找不到第一种字体，它将转到下一种

只需像这样使用css：

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

还是我遗漏了什么

如果您想使用javascript制作一些更奇特的字体，请查看Google的webfont库：

---

您的意思是，您想知道HTML是否可以查询设备的数据（特别是系统字体）并查看是否存在？不可以。但是，您可以使用CSS3设置一个通用字体，该字体已放置在站点服务器上。这里的重点是什么？为什么要这样做？这不能在CSS中本机完成。使用JavaScript，您可能会使用一个隐藏的、绝对定位的

，将主字体设置为字母图标，将次字体设置为通过

@font\u face

规则任意命名的OTF，并获取其计算高度，以查看其是否与预期值匹配（最好对装置变化有一定的公差）。检查字体是否可用。为什么需要modernizer来做这件事？你如何检查这件事是否可用？既然modernizer使用javascript来做它所做的事情，为什么不使用javascript来做同样的事情呢？因为这是一个简单、容易、快速的解决方案？当然，他可以使用一个小脚本来检查字体是否可用ble。没有Modernizer。但我认为这个答案代表了一般的概念。你可以替换字体，但不能用图像替换文本。哦，我现在明白了。他想用不存在的字体的图像替换不存在的字体。如果你像我一样阅读，请注意其他人的回答。谢谢，我在链接中使用了javascript您提供了检测字体的功能，如果缺少字体，则可以更改页面内容。我这样做的主要原因是，我的一些系统使用了受版权保护的特殊符号字体，其他人不会有，我也不能发布。如果有人有，我希望他们看到它，对于那些没有的人，我希望提供一个文本描述也许你缺少的是如何用一张图片替换掉一张丢失的字体？。祝你好运