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

【问题标题】：Specify fallback font sizes in CSS?在 CSS 中指定后备字体大小？
【发布时间】：2011-08-23 16:17:18
【问题描述】：

有没有办法为 CSS 中的后备字体指定不同的字体大小？我想做这样的事情（这显然行不通）：

分区 { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; 字体大小：20px、18px、18px、18px； }

这个想法是如果用户安装了 Arial Narrow，它将以 20 像素显示；如果不是，浏览器会在 18px 处回退到 Arial，然后在 18px 处回退到 Helvetica，等等。

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

【问题讨论】：

你能用一种字体打破它的多个规则：一个接一个地输入吗？ Arial narrow 20 将是最后一个。
@microspino，这将覆盖之前的声明。
@DA - 即使没有安装指定的字体，它仍然会覆盖它吗？这是一个有趣的想法...
是的，它会，这两种样式没有“链接”在一起。无论 div 的最后一个 font-size 声明是什么，它都将使用它，而不管正在呈现的字体。

标签： javascript css font-size

【解决方案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 规范有“字体大小调整”，这可能在这里有用。但是，在我写这篇文章时，Firefox 以外的浏览器的支持可能不是最佳的。这是该属性的 W3 字样： http://www.w3.org/TR/WD-font/#font-size-adjust

【讨论】：

我也相信答案是否定的，但如果它存在，它将是一个有用的功能。
+1 没有可靠的方法可以做到这一点，即使在 JS 中也是如此。见Get computed font-family in JavaScript
Remy Sharp 的方法非常聪明，尽管这对我的特殊情况来说太过分了。我希望有一种方法可以通过我不知道的纯 CSS 来做到这一点。老实说，没有人有点令人惊讶……应该有人提出来！ :-)
好点 daGUY，有人应该！原来在 CSS3 的 W3 文档中有类似的东西，我添加了一个链接到我的答案。
@Jeroen - 很好，这就是我正在寻找的东西。因此，一旦浏览器支持流行起来，这似乎在未来可能会更实用。不过，老实说，我更喜欢我的假设语法 - 如果您可以使用 font-family 属性指定多种字体，为什么不使用 font-size 属性指定多种尺寸？

【解决方案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>

【讨论】：

【解决方案3】：

使用 Javascript，您可以创建一个包含大写“A”的跨度。如果安装了 Arial Narrow，它将具有 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';
}

【讨论】：

【解决方案4】：

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

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

@font-face 我发现可以在除 IE8/IE9 之外的所有常见浏览器上使用，例如，如果 vista 没有 Arial Narrow，我会为 IE8 使用具有新字体大小的 fullback 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>

【讨论】：

您是否打算在示例中为每个版本的 IE 包含相同的 css 文件？

【解决方案5】：

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

【讨论】：

【解决方案6】：

@font-face size-adjust descriptor in CSS Fonts Module Level 5“定义了与此字体相关的字形轮廓和度量的乘数，以允许作者在以相同字体大小呈现时协调各种字体的设计”。 css-fonts-5 是工作草案（截至 2022 年 2 月），但 many browsers have support 'size-adjust' 自 2021 年底以来。

在下面的示例中，size-adjust 用于使 'courier-new 12pt' 和 'Consolas 12pt' 以接近相同的宽度进行渲染；通常需要“Courier New 11pt”来匹配“Consolas 12pt”的宽度。

@font-face { font-family: courier-new; src: local(Courier New); size-adjust: 91.6% }

<p style="font-family: 'Courier New'; font-size: 11pt">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz</p>
<p style="font-family: courier-new; font-size: 12pt">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz</p>
<p style="font-family: Consolas; font-size: 12pt">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz</p>

【讨论】：