根据字体堆栈中使用的字体来调整字体大小 [英] Adjust font size depending on which font is used from a font stack

问题描述

我正在为网站上的标题使用一种新的google api字体。

我的字体堆栈如下：

  font-family：'Yanone Kaffeesatz'，arial，serif; 
 

当Yannone Kaffeesatz字体渲染时，这是很好的，但如果没有，Arial

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

理想地支持多种浏览器。

感谢

汤姆

解决方案

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

如果您要使用JavaScript路线，请此处是一个链接到一个聪明的方法来检测JavaScript中的实际字体族。

一旦你知道所使用的字体，很容易将 element.style.letterSpacing 调整到所需的金额。 / p>

I'm using one of the new google api fonts for a heading on a site. It's Yannone Kaffeesatz and is quite a condensed typeface.

My font stack is as follows:

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

This is fine when the Yannone Kaffeesatz font renders, but if it doesn't, Arial is much more open and the heading spans over two lines.

My question is:

Is it possible to use a different font-size depending on which font is rendered on the page?

Ideally supported across a multitude of browsers.

Thanks

Tom

解决方案

Nope, this is not possible. It is complex and difficult to find out the actual used font from a font-family list even in JavaScript - it's impossible in pure CSS.

If you want to go the JavaScript route, here is a link to a clever method to detect the actual font-family in JavaScript.

Once you know the font used, it's easy to adjust element.style.letterSpacing to the required amount.

这篇关于根据字体堆栈中使用的字体来调整字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！