Conditional font size based on font family

Question

Is there a way to write a conditional font size based on a font family in CSS or jQuery?

Answer 1

Yes, you can easily with jquery:

http://jsbin.com/acuzah/1/edit

if ($("div").css('font-family') === 'Arial') { $("div").css({'color': '#00FF00'}); } 

Using css (), you read the font family of the property, check if its Arial, for example, set whatever css property you want. Or add a class.

http://api.jquery.com/css/

http://api.jquery.com/addClass/

Answer 2

Not really. But in some limited and relatively useless sense, yes.

In CSS, properties are independent of each other, except when CSS specifications define relationships.

You can do a lot of things in scripts, but the simple jQuery method requesting css('font-family') gives you only the specified list. If you declare font-family: Ariel, Helvetia, sansserif (this declaration is intentionally broken, although it is formally valid), it will give you the string Ariel, Helvetia, sansserif , although none of these fonts are actually used for the element. Thus, this approach is useless for the most common use case (where you want to use a list of fonts to cover different systems, and you want the font size to vary depending on which font is actually used).

There are complex ways to try to figure out, in JavaScript, the font actually used for the element. They are usually based on estimating the width of some text and comparing the result with the width of that text in some fonts.

Finally, there is a logical, albeit poorly supported way to use font-size-adjust . Only Firefox supports it, and support is partially broken in a serious way (it uses incorrect x height information, for example, x-height of Verdana is actually 0.545.

Answer 3

 if ($("div").css('font-family') === 'Arial') { $("div").css({'font-size': '100px'}); }