Question

有没有办法在CSS中为后备字体指定不同的字体尺寸？我想做这样的事情（显然不起作用）：

div {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 20px, 18px, 18px, 18px;
}

如果用户安装了Arial Narrow，那么Arial Narrow会显示为20px;如果没有，浏览器将以18px回落至Arial，然后以18px回落至Helvetica等。

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

Answer 1

我明白你想要什么，但我认为你的问题的答案是“不，这不能在CSS中完成”，至少在CSS2 afaik中没有。

希望有人可以证明我错了，因为我也想要这样：D

我认为JS可以做到这一点，至少在某些方面。不确定是否“安装了这个字体？” JS中的方法，但您可以根据操作系统等进行一些有根据的猜测。没有经验抱歉。

编辑：一些快速谷歌搜索确实提供了一些聪明的JS技巧，虽然我还没有尝试过。例如。 http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

另一个编辑，经过一些搜索：我是由“有人应该提出来”引发的：D。似乎CSS3规范有“font-size-adjust”，这可能在这里有用。但是，在我写这篇文章时，支持Firefox以外的浏览器可能不是最佳选择。这是该属性的W3字： http://www.w3.org/TR/WD-font/#font-size-adjust

Answer 2

我遇到了使用CSS3字体的相关问题，显然在IE6-8中无效。后备字体（Arial）比默认字体大得多。以类似于mVChr的方式绕过它但通过检测浏览器。真的不是很好，但是必须支持IE的乐趣。代码（使用jQuery）：

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

Answer 3

使用Javascript，您可以在其中创建一个带有大写“A”的跨度。如果安装了Arial Narrow，则其宽度为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';
}

Answer 4

如果某些浏览器缺少Arial Narrow，那些浏览器通常会接受@ font-face网址，例如

@font-face {
    font-family: Arial Narrow;
    src: url(Arial Narrow.otf);
}

@ font-face我发现除了IE8 / IE9之外的所有常见浏览器都有效，如果vista不具备Arial Narrow，例如我使用新的字体大小的IE8的后卫CSS

<head>

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->

</head>

Answer 5

也许是一个非常明显的答案，但只要没有指定备用字体的字体大小的 CSS 规则 - 这很有意义，我发现的下一个最佳解决方案是插入字体系列对于每个有问题的元素，然后选择大小相似或更小的字体作为后备字体，以减少对 CLS 的影响（我发现 Tahoma 大部分时间都是不错的选择）。

在CSS中指定后备字体大小？

5 个答案: