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

Question

8

我正在网站的标题中使用一种新的谷歌API字体。它叫做Yannone Kaffeesatz，是一种相当紧凑的字体。

我的字体堆栈如下：

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

当Yannone Kaffeesatz字体渲染时，这是很好的，但如果没有，Arial更加开放，标题会跨越两行。

我的问题是：

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

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

谢谢

汤姆

- TDH

这是一份重复的内容，但我找不到原始版本。 - Pekka

1

你可以添加基于服务器的用户代理检测，然后提供不同的页面（或仅CSS）。在我看来，这是唯一比较优雅的解决方案。Google有一个保证可用的浏览器和版本列表。如果主要是静态文本，你可以使用PNG。 - user479870

2个回答

0

一个略微根据字体变化字号的属性是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）。

- Beni Cherniavsky-Paskin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pekka · Accepted Answer

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

如果你想走JavaScript的路线，这里有一个巧妙的方法来检测JavaScript中实际使用的字体系列。

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