Custom font sometimes renders in italics in IE8 / IE7

后端 未结 3 1346
有刺的猬
有刺的猬 2021-02-09 15:13

In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will

3条回答
  •  情话喂你
    2021-02-09 15:46

    For each of your @font-face font-family names, create a custom name instead.

    Example:

    @font-face {
        font-family: 'DINnormal';
        src: url('fonts/DINWeb.eot');
        src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
             url('fonts/DINWeb.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'DINbold';
        src: url('fonts/DINWeb-Bold.eot');
        src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
             url('fonts/DINWeb-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
    }
    @font-face {
        font-family: 'DINitalic';
        src: url('fonts/DINWeb-Ita.eot');
        src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
             url('fonts/DINWeb-Ita.woff') format('woff');
        font-weight: normal;
        font-style: italic;
    }
    @font-face {
        font-family: 'DINboldItalic';
        src: url('fonts/DINWeb-BoldIta.eot');
        src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
             url('fonts/DINWeb-BoldIta.woff') format('woff');
        font-weight: bold;
        font-style: italic;
    }
    

    After those CSS rules are defined, then you can include specific CSS rule:

    li {
      font: 18px/27px 'DINnormal', Arial, sans-serif;
    }
    

提交回复
热议问题