Question

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

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

图像是否可以相同？我有一个我想要显示的svg图像，以及不支持svg的浏览器的备份png（如某些移动浏览器）。

Answer 1

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

Answer 2

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

Answer 3

一个简单的场景是将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]-->

Answer 4

对象元素很糟糕，因为它们会加载所有图像，即使不需要也是如此。一个简单的img元素不是很灵活，所以我把它与一个图片元素结合起来。这样就不需要CSS了。发生错误时，所有srcset都设置为回退版本。断开的链接图像未显示。 picture-element支持响应式设计和浏览器不支持的类型的多个回退。

<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>

在html中显示备份映像

4 个答案: