根据字体堆栈中使用的字体调整字体大小

Question

我正在使用一种新的google api字体作为网站上的标题。这是Yannone Kaffeesatz并且是一种浓缩的字体。

我的字体堆栈如下：

    font-family: 'Yanone Kaffeesatz', arial, serif;

当Yannone Kaffeesatz字体呈现时，这很好，但如果没有，Arial会更开放，标题跨越两行。

我的问题是：

是否可以使用不同的字体大小，具体取决于在页面上呈现的字体？

理想情况下支持众多浏览器。

由于

汤姆

Answer 1

不，这是不可能的。即使在JavaScript中，从font-family列表中找出实际使用的字体也很复杂且很难 - 在纯CSS中这是不可能的。

如果您想要使用JavaScript路线，here是指向用于检测JavaScript中实际字体系列的聪明方法的链接。

一旦您知道使用的字体，就可以轻松地将element.style.letterSpacing调整为所需的数量。

Answer 2

根据字体稍微改变字体大小的一个属性是font-size-adjust。它是CSS3，仅受Firefox支持。

但我不认为你想调整大小与宽高比一样，使Arial变窄。挤压字体（例如字母间距）变得很难看。相反，您应该从堆栈中的更多精简字体开始。

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html详细研究了缩写字体选项。其中一个棘手的发现是font-stretch: condensed，例如有助于访问Arial Narrow on windows（with Office）。