1

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.

ivanjonas
  • 599
  • 7
  • 19
  • 1
    possible duplicate of [Adjust font size depending on which font is used from a font stack](http://stackoverflow.com/questions/4118673/adjust-font-size-depending-on-which-font-is-used-from-a-font-stack) – LoveAndCoding Feb 14 '15 at 23:38
  • Yeah, looks like it isn't possible without a js library (and not totally reliable, at that). Thanks for the link. – ivanjonas Feb 14 '15 at 23:47
  • i'm very curious on the question too! – Stickers Feb 15 '15 at 01:21
  • Yeah - it would be nice if "font" would take a list, but it doesn't seem to. – David P Feb 16 '15 at 15:19

1 Answers1

0

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/

ivanjonas
  • 599
  • 7
  • 19