0

i have the following CSS code:

.massp_text_box p {
  font-size: 20px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

As I only have the font in .otf and .ttf I can not support IE. In that case IE takes Arial as the font. In that case the font-size should not be 20px - it should be 18px.

How can I tell my CSS code "If Eurostile-Bold is not supported, take font-size:18px."

Any idea? Thanks!

Torben
  • 5,388
  • 12
  • 46
  • 78
  • possible duplicate of [How can I detect which font was used in a web page?](http://stackoverflow.com/questions/845/how-can-i-detect-which-font-was-used-in-a-web-page) – Ben Dyer Jul 14 '14 at 18:04
  • Font detection is really overkill for the small task he's trying to accomplish. He just wants the font size to be smaller if IE is displaying Arial as an alternative to his font. – Mastrianni Jul 14 '14 at 18:16

2 Answers2

2

you could target ie with conditional comments and/or conditional compilation in this case, but you can also create the formats you need via http://fontsquirrel.com

albert
  • 8,112
  • 3
  • 47
  • 63
0

I would suggest that you create an IE-only stylesheet so that you can set those values specifically for IE. Microsoft has implemented a solution for accomplishing this called "Conditional Comments". The way they work is conditional comments are only registered when a user is visiting your site with Internet Explorer, and all other web browsers will ignore the comment and any code nested inside of a conditional comment.

In order to use them in your case you'd need to do the following:

1] Create a new stylesheet called ie.css, and place it in the same directory as your original CSS file.

2] Place the same CSS code you normally would to target .massp_text_box p into the ie.css file, but change the font-size to 18px. I used your sample code, but feel free to change these styles to whatever you want, as IE will be the only browser that uses them:

.massp_text_box p {
  font-size: 18px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

3] Lastly, in your HTML code, you'll need to place the conditional comment nested in your <head> tag like you would a normal stylesheet, and be sure to change the href= so that it links to the correct location of the ie.css stylesheet.

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

*Note: This conditional comment targets all versions of IE, but you have the option to target only specific IE versions if you so desire. See the extra reading to learn how to do that, but for your immediate needs, the above code should suffice.

Extra Reading: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Mastrianni
  • 3,900
  • 3
  • 20
  • 32
  • (IE conditional comments are only supported up to IE9.) – Ulrich Schwarz Jul 14 '14 at 18:23
  • @Ulrich Schwarz Don't IE9 and IE10 both support his OTF/TTF fonts? It's only the versions that support conditional comments that don't support OTF/TTF. Correct me if I'm wrong. – Mastrianni Jul 14 '14 at 18:28
  • Caniuse lists TTF/OTF support in IE10,11 as "partial" without any further explanation; in IE9 it apparently depends on a copyright flag in the font. – Ulrich Schwarz Jul 14 '14 at 18:32