在CSS中指定后备字体大小？-Java 学习之路

有没有办法为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来实现类似的效果吗？

4 回答

0

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

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

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

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

另一个编辑，经过一些搜索：我被"someone should propose it"：D触发 . 似乎CSS3规范有"font-size-adjust"，这可能在这里使用 . 但是，在我写这篇文章时，支持Firefox以外的浏览器可能不是最佳选择 . 这是该房产的W3字：http://www.w3.org/TR/WD-font/#font-size-adjust

回复于 2024-05-10T02:15:26+08:00

我有一个使用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>

回复于 2024-05-10T02:15:26+08:00

使用Javascript，您可以使用大写“A”创建 Span . 如果安装了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';
}

回复于 2024-05-10T02:15:26+08:00

如果某些浏览器缺少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>

回复于 2024-05-10T02:15:26+08:00