Geek Answers Handbook

Adjust the font size depending on which font is used from the font stack

I am using one of the new google api fonts for the title on the site. This is Yannone Kaffeesatz and a rather concise font.

My font stack looks like this:

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

This is great when the Yannone Kaffeesatz font is displayed, but if it isn't, Arial is much more open, and the title spans two lines.

My question is:

Can I use a different font size depending on which font is displayed on the page?

Ideally supported in many browsers.

thanks

Tom

+7
html css font-size fontfamily
source share
2 answers

No, It is Immpossible. It is hard and hard to find the actual font used from the font-family list, even in JavaScript - this is not possible in pure CSS.

If you want to switch to the JavaScript route, here is a link to a smart method for detecting the actual font family in JavaScript.

Once you know the font used, easily adjust element.style.letterSpacing to the required amount.

+4
source share

One property that slightly changes the font size depending on the font is font-size-adjust . This is CSS3, only supported by Firefox.

But I don’t think you want to adjust the size in the same way as aspect ratio, which makes Arial narrow. Compressing a font (such as the distance between letters) becomes ugly. Instead, you should start with more compressed fonts in your stack.

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html details compressed font options. One of the more complex results is font-stretch: condensed , which, for example, helps access, for example. Arial Narrow by windows (with Office).

0
source share

More articles:


All Articles