时间戳

首页 > 解决方案 > 当字体丢失时，让元素上的样式在字体系列中具有继承值是否有效？

html - 当字体丢失时，让元素上的样式在字体系列中具有继承值是否有效？

问题描述

如果我有这个 HTML 的页面

<body style="font-family:Helvetica">
    <span style="font-family:Segue">Hello World</span>
</body>

如果列出的第一个字体在系统上不可用，将跨度的字体系列设置Segue, inherit为允许它继承父字体是否有效？

<body style="font-family:Helvetica">
    <span style="font-family:Segue, inherit">Hello World</span>
</body>

它似乎在浏览器（Firefox）中工作，但 Firefox 自己的调试工具说它是无效的。

换句话说，可以写font-family: AnyFont, inherit吗？

更新：
使用inherit不起作用。

现在的问题可能是，当字体不可用时如何获得一个跨度来继承字体。

标签： htmlcss

解决方案

inherit独立存在。添加inherit将继承父字体系列，无论它是否存在自己的字体系列（即您为 span 声明的字体系列即使存在也会被忽略，它只会继承正文的字体系列）。

你可以简单地做：

body {
   font-family: Helvetica;
}
span {
   font-family: Segue, Helvetica;
}

这样，它使用Segue，如果它不可用，它会转移到Helvetica。因此，在您的代码中，在 span 样式中，声明您希望它回退到的字体，用逗号分隔。

推荐阅读