Adjust font size depending on which font is used from a font stack
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.
One property which slightly changes font size depending on font is font-size-adjust. It's CSS3, only supported by Firefox.
But I don't think you want to tweak the size as much as aspect ratio, making Arial narrow. Squeezing a font (eg the letter spacing) becomes ugly quick. Instead, you should start with more condensed fonts in your stack.
http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html studies condensed font options in detail. One of the trickier findings there is font-stretch: condensed which eg helps access eg Arial Narrow on windows (with Office).
上一篇: Snoop进程间通信
下一篇: 根据字体堆栈中使用的字体来调整字体大小