图标字体在不同的计算机上不显示相同的字体

时间:2014-02-24 18:58:38

标签: css media-queries font-face

这个问题让我疯狂了几个星期。我见过类似问题herehere但未找到答案。有时我的同事无法在他们的IE9上看到图标字体(顺便提一下icomoon),尽管我可以。而现在它似乎已经转变 - 同事可以看到它们而我却做不到。我通过本机安装的IE8为我的笔记本电脑供电,我们网站的旧版本显示了我的IE9机器上不会显示的图标。我们网站的较新版本也不会显示图标。

我已经准备好编写一个IE9样式表,只是完全删除了图标字体,因为对于那些看不到字体的用户来说,IE仍然会增加额外的15px左边的填充。

IE8

enter image description here

IE9

enter image description here

它可能是浏览器本身的设置还是什么?这是我的CSS:

@media screen {
    @font-face {
        font-family: 'icons';
        src:url('Media/fonts/icons.eot');
        src:url('Media/fonts/icons.eot?#iefix') format('embedded-opentype'),
            url('Media/fonts/icons.woff') format('woff'),
            url('Media/fonts/icons.ttf') format('truetype'),
            url('Media/fonts/icons.svg#icons') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    [data-icon]:before {
        font:normal normal normal 1em/0 'icons'; speak:none; text-transform:none;
        -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    [data-icon="search"]:before     { content:"\e601"; }
    [data-icon="downarrow"]:before  { content:"\e602"; }
    [data-icon="forms"]:before      { content:"\e603"; }
    [data-icon="contact"]:before    { content:"\e604"; }
}

1 个答案:

答案 0 :(得分:0)

我解决了自己的问题,因为我在打了几个星期之后打了出来。由于我没有在任何地方找到这个答案,我认为值得记录在这里。

问题是将CSS放在@media查询中:@media screen {}。我刚删除了那个查询,现在我的字体似乎正在运行。

我希望这可以帮助那些可能在这个问题上磕磕绊绊的人。虽然我仍然不确定为什么我的同事安装和我的安装之间存在差异,所以如果有人能放光,那就太棒了!