How do I specify font sizes a list of fonts in the font-family property?

1
votes

As you know, you may pass a space-separated list to font-family. The browser will use the first one that is available after skipping missing fonts.

.rule {
    font-family: doesNotExist, myriad-pro, helvetica, sans-serif;
}

Now, myriad-pro and Helvetica can both work in my design, provided that myriad-pro is in 12px font and Helvetica in 11px.

How can I tell the browser to use a particular font size for a particular font? I know that I can pass both family and size in the font shorthand property, but it will not accept a list of such pairs.

1
cssfont-sizefont-family
possible duplicate of Adjust font size depending on which font is used from a font stack – LoveAndCoding
Yeah, looks like it isn't possible without a js library (and not totally reliable, at that). Thanks for the link. – ivanjonas
i'm very curious on the question too! – Stickers
Yeah - it would be nice if "font" would take a list, but it doesn't seem to. – David P

1 Answers

0
votes

Well, as stated in the duplicate question (and that question's duplicate) there is a js library that can help with font detection, which is something CSS simply cannot do. It uses a simple but clever method for font detection. I will link it here for posterity:

http://www.lalit.org/lab/javascript-css-font-detect/