Javascript 在CSS中指定回退字体大小？

有没有办法为CSS中的回退字体指定不同的字体大小？我想做这样的事情（这显然不起作用）：

div{ 字体系列：“Arial窄”，Arial，Helvetica，无衬线； 字体大小：20px，18px，18px，18px； } 其想法是，如果用户安装了Arial窄带显示器，它将以20px的速度显示；如果没有，浏览器将返回到Arial（18px），然后是Helvetica（18px），以此类推

---

或者，我可以使用JS来实现类似的效果吗？

我知道你想要什么，但我认为你的问题的答案是“不，这不能在CSS中完成”，至少不能在CSS2中完成

希望有人能证明我错了，因为我也想要这个：D

我想JS可以做到这一点，至少在某种程度上是这样的。不确定JS中是否有“是否安装了此字体？”方法，但您可以根据操作系统等做出一些有根据的猜测。没有经验，抱歉

编辑：一些快速的谷歌搜索确实提供了一些聪明的JS技巧，尽管我还没有尝试过。例如。

在进一步搜索之后，进行另一次编辑： 我被“有人应该建议”触发了：D。似乎CSS3规范有“字体大小调整”，这在这里可能有用。然而，在我写这篇文章的时候，在Firefox以外的浏览器中的支持可能不是最优的。以下是关于该属性的W3单词：

---

使用Javascript，您可以创建一个带有大写字母“a”的span。如果安装了Arial窄带，其宽度将为11px，如果未安装，其宽度将大于11px。您可以检查此范围，然后将其隐藏以确定已安装的内容

a = document.createElement('span');
a.innerHTML = 'A';
a.style.display = 'inline';
a.style.fontFamily = '"Arial Narrow", Arial, Helvetica, sans-serif';
a.style.fontSize = '20px';
document.body.appendChild(a);
aw = a.offsetWidth;
a.style.display = 'none';
a.parentNode.removeChild(a);

if (aw > 11) {
    document.getElementById('yourDiv').style.fontSize = '18px';
} else {
    document.getElementById('yourDiv').style.fontSize = '20px';
}

---

我在使用CSS3字体时遇到了一个相关的问题，这在IE6-8中显然不起作用。回退字体（Arial）比默认字体大得多。以与mVChr类似的方式绕过它，但通过检测浏览器。不太好，但必须支持IE代码（使用jQuery）的乐趣：

$（文档）.ready（函数（）{
//更改IE6-8中的字体大小，因为它们显示的是Arial而不是Dincon
if（navigator.userAgent.indexOf（'MSIE 6'）>-1
||navigator.userAgent.indexOf（'MSIE 7'）>-1
||navigator.userAgent.indexOf（'MSIE 8'）>-1）{
$（'.disking class'）.css（'font-size'，'11px'）；
}
});

如果某些浏览器上缺少Arial窄带，则这些浏览器通常接受@font-face URL，如

@font-face{
字体系列：Arial窄字体；
src:url（Arial-shown.otf）；
} 

这可能是一个非常明显的答案，但只要没有CSS规则来指定备份字体的字体大小，这将非常有意义，我发现的下一个最佳解决方案是为每个有问题的元素插入字体系列，然后选择大小类似或更小的字体作为备用字体，以减少对CLS的影响（我发现Tahoma在大多数情况下都是一个很好的选择）。

您能用一种字体打破多个规则：一个接一个输入吗？Arial窄带20将是最后一个。@microspino，这将刚好超过前面的声明。@DA-即使未安装指定的字体，它仍会覆盖它吗？这是一个有趣的想法……是的，会的，这两种风格并没有“联系”在一起。不管div的最后一个字体大小声明是什么，它都将使用什么，不管呈现的是什么字体。我也相信答案是“否”，但如果它存在，它将是一个有用的功能。+1没有可靠的方法来实现这一点，即使是在JS中。看，雷米·夏普的方法非常聪明，尽管对于我的特殊情况来说，这太过分了。我希望有一种方法可以通过简单的CSS做到这一点，而我只是不知道。说实话，令人惊讶的是，竟然没有……有人应该提出建议！：-）很好，达古，应该有人！原来在W3的CSS3文档中也有类似的内容，我在我的答案中添加了一个链接。@Jeroen-nice，这就是我要找的类型。因此，一旦浏览器支持流行起来，这在未来可能会更加实用。老实说，我更喜欢我假设的语法——如果你可以用font family属性指定多个字体，为什么不用font size属性指定多个大小呢？在你的示例中，你是否打算为每个IE版本包含相同的css文件？

a = document.createElement('span');
a.innerHTML = 'A';
a.style.display = 'inline';
a.style.fontFamily = '"Arial Narrow", Arial, Helvetica, sans-serif';
a.style.fontSize = '20px';
document.body.appendChild(a);
aw = a.offsetWidth;
a.style.display = 'none';
a.parentNode.removeChild(a);

if (aw > 11) {
    document.getElementById('yourDiv').style.fontSize = '18px';
} else {
    document.getElementById('yourDiv').style.fontSize = '20px';
}

<script>
    $(document).ready(function() {
        //change font sizes in IE6-8 because they display Arial not Dincon
        if(navigator.userAgent.indexOf('MSIE 6') > -1 
         || navigator.userAgent.indexOf('MSIE 7') > -1 
         || navigator.userAgent.indexOf('MSIE 8') > -1) {
            $('.offending-class').css('font-size', '11px');
        }
    });
</script>