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

【问题标题】：Adjust font size depending on which font is used from a font stack根据字体堆栈中使用的字体调整字体大小
【发布时间】：2023-03-09 10:50:01
【问题描述】：

我正在使用一种新的 google api 字体作为网站标题。它是 Yannone Kaffeesatz，是一种非常简洁的字体。

我的字体栈如下：

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

Yannone Kaffeesatz 字体呈现时这很好，但如果不呈现，Arial 会更加开放，并且标题跨越两行。

我的问题是：

是否可以根据页面上呈现的字体使用不同的字体大小？

理想地支持多种浏览器。

谢谢

汤姆

【问题讨论】：

这是一个骗子，但我找不到原件
您可以添加基于服务器的用户代理检测，然后提供不同的页面（或只是 css）。 IMO 这是唯一有点优雅的解决方案。谷歌有一个保证可以工作的浏览器和版本的列表。如果它主要是静态文本，您可以只使用 PNG。
原来的副本大概就是这个：Changing Body Font-Size based on Font-Family with jQuery

【解决方案1】：

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

如果你想走 JavaScript 路线，here 是一个链接，可以找到一种巧妙的方法来检测 JavaScript 中的实际字体系列。

一旦您知道所使用的字体，就很容易将element.style.letterSpacing 调整到所需的数量。

【讨论】：

【解决方案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，例如帮助访问例如Windows 上的 Arial Narrow（带 Office）。

【讨论】：