IcoMoon在chrome中显示问题

时间:2014-03-26 14:00:38

标签: css google-chrome font-face icon-fonts

Chrome浏览器中的icomoon字体存在问题,有时图标有时无法显示。我没有得到缺少字体的空矩形"后备"。

当我选择带有图标的元素时,它会出现,所以重绘会修复它。但强迫重绘是一个可怕的解决方案......

我在Chrome中找到关于错误图标字体的唯一解决方案是使用PUA代码,但我已经这样做了。

我的图标CSS:

.icon-back-in-time-mirror:before {
    content: "\e613";
}

.icon {
    position: relative;
}

.icon:before {
    position: absolute;
    height: 22px;
    margin: -11px 0 0;
    top: 50%;
    left: 0;
    font-family: 'icomoon';
    font-weight: 400;
    line-height: 22px;
    display: block;
    speak: none;
}

@font-face规则

@font-face {
  font-family: 'icomoon';
  src:url('/gui/css/fonts/icomoon.eot?-cpkbjx');
  src:url('/gui/css/fonts/icomoon.eot?#iefix-cpkbjx') format('embedded-opentype'),
    url('/gui/css/fonts/icomoon.woff?-cpkbjx') format('woff'),
    url('/gui/css/fonts/icomoon.ttf?-cpkbjx') format('truetype'),
    url('/gui/css/fonts/icomoon.svg?-cpkbjx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

0 个答案:

没有答案