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

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

@font-face size-adjustCSS 字体模块第 5 级中的描述符“定义了与该字体相关的字形轮廓和度量的乘数，以允许作者在以相同字体大小渲染时协调各种字体的设计”。css-fonts-5 是工作草案（截至 2022 年 2 月），但许多浏览器自 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>

Answer 2

我明白你想要什么,但我认为你的问题的答案是"不,这不能在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