Conditional font-size based on font-family

Question

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

Answer 1

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

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

In scripting, you can do many things, but the simple jQuery way, querying for css('font-family') only gives you the specified list. If you declare font-family: Ariel, Helvetia, sansserif (this declaration is intentionally broken, though formally valid), it will give you the string Ariel, Helvetia, sansserif, even though none of those fonts is actually used for the element. So this approach is useless for the most common use case (where you want to use a list of fonts, to cover different systems, and wish to make font size vary according to which font gets actually used).

There are tricky ways to try to find out, in JavaScript, the font actually use for an element. They are usually based on evaluating the width of some text and comparing the result with the width of that text in some fonts.

Finally, there is the logical, though poorly supported way of using font-size-adjust. Only Firefox supports it, and the support is partly broken in a serious way (it uses wrong x-height information; e.g., the x-height of Verdana is actually 0.545.