Why is IE8 not loading my eot files?

2019-01-26 09:11发布

站内文章 / HTML/CSS
12 0 0

问题:

I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?

(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )

(Convert it here: https://onlinefontconverter.com )

STYLES.CSS

@font-face
{
    font-family: RobotoCondensed;
    src: url("Roboto-Condensed.eot");
}

@font-face
{
    font-family: RobotoCondensed;
    src: url("Roboto-Condensed.ttf");
}

.myDiv
{
    font-family: RobotoCondensed, Arial, Helvetica;
    font-size: 10px;
    color: #e8e8e8;
}

index.html (relevant code)

<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>

The stylesheet and font are in the same folder.

回答1:

Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.



回答2:

Try this

        @font-face
    {
        font-family: 'RobotoCondensed';
        src: url('Roboto-Condensed.eot');
  src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Condensed.woff') format('woff'),
         url('Roboto-Condensed.ttf') format('truetype'),
         url('Roboto-Condensed.svg#') format('svg');

}

    .myDiv
    {
        font-family: RobotoCondensed, Arial, Helvetica;
        font-size: 10px;
        color: #e8e8e8;
    }


回答3:

I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta


<head>

   <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>

</head>


The meta tag solved problem and every variation worked!

Variation 1


<style type="text/css">

  @font-face

  {

    font-family: 'SolaimanLipi';

    src: url('SolaimanLipi.eot');

    src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');

  }

  @font-face

  {

    font-family: 'Yogesh';

    src: url('CDACOTYGN.eot');

    src: url('CDACOTYGN.ttf') format('truetype');

  }

</style>


Variation 2


<style type="text/css">

  @font-face{

    font-family: 'solaimanlipi';

    src: url('cdacotygn-webfont.eot');

    src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),

         url('solaimanlipi-webfont.woff') format('woff'),

         url('solaimanlipi-webfont.ttf') format('truetype'),

         url('solaimanlipi-webfont.svg#webfont') format('svg');

  }

  @font-face {

    font-family: 'cdacotygn';

    src: url('cdacotygn-webfont.eot');

    src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),

         url('cdacotygn-webfont.woff') format('woff'),

         url('cdacotygn-webfont.ttf')  format('truetype'),

         url('cdacotygn-webfont.svg#svgFontName') format('svg');

  }

</style>

We think complex but often needle in haystack is elsewhere head meta tags

You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html

Works in all the browsers including the old IE8



回答4:

Try

font-family: "RobotoCondensed", Arial, Helvetica;

The quotes should force it as your primary option



标签： html css internet-explorer internet-explorer-8 fonts
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~