1

当浏览器无法处理字体包specialFont时，以下代码会自动将字体切换为basicFont：

<p style="font-family:'specialFont', basicFont"> Hello world! </p>

图像也可以吗？我有一个我想展示的 svg 图片，以及一个用于不支持 svg 的浏览器（如某些移动浏览器）的备用 png。

4

5 回答 5

1

我认为不可能这样，但这是一个很好且快速的解决方案：http ://css-tricks.com/svg-fallbacks/

于 2013-10-24T18:10:55.580 回答
1

一个简单的场景是使用一个object元素，其中包含另一个object元素（例如 PNG 文件），即作为后备内容。尽管这似乎在 Android 2 上运行良好，但 IE 8 和更早版本对此感到困惑。所以我认为我们需要用丑陋的“IE 伪注释”（又名“条件注释”）来处理它们：

<!--[if (IE 9)|!(IE)]><!-->
  <object data=logo.svg type=image/svg+xml width=50 height=50>
    <object data=logo.png type=image/png width=50 height=50>
      <span class=logo>ACME</span>
    </object>
  </object>
<!-- <![endif]-->
<!--[if lte IE 8]>
  <img src=logo.png alt=ACME>
<![endif]-->
于 2013-10-24T19:20:15.613 回答
0

您可以使用 onerror 事件来填补空白。使用 jQuery 或类似方法绑定 onError 事件，我们可以提供默认图像。更多我有一个帖子。

于 2013-10-24T18:15:07.947 回答
0

对象元素很糟糕，因为它们会加载所有图像，即使不需要。一个简单的 img 元素不是很灵活，所以我将它与图片元素结合起来。这种方式不需要CSS。发生错误时，所有 srcset 都设置为备用版本。未显示损坏的链接图像。图片元素支持响应式设计和浏览器不支持的类型的多种回退。

<picture>
    <source id="s1" srcset="portrait_version.svg" type="image/svg+xml" media="orientation: portrait">
    <source id="s2" srcset="landscape_version.svg" type="image/svg+xml">
    <img src="fallback.png" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
于 2017-03-10T18:05:11.240 回答
0

给你的图像一个onerror交换图像源

<img src="mainImage.png"
onerror='this.src = "backupImage.png"'>
于 2021-09-14T15:46:48.753 回答