Chrome和Opera上的字体字形渲染问题

Question

我目前正在Visual Studio 2013中开发ASP.MVC Web项目，在Chrome（39.0.2171.99 m）和Opera（26.0.1656.60）中使用font-face渲染字形时遇到了一个奇怪的问题。

我正在使用最新的Web Essentials版本并使用其SCSS预编译器。我有一个小的mixin用于构建字体的Css，如下所示。

@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }

  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$file-path}.svg##{$font-family}') format('svg');
    }
  }
}

在SCSS文件中调用mixin

@include font-face(Flat-UI-Icons, '../fonts/Flat-UI-Icons', 300, normal);

这在css文件中给出了以下结果

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: Flat-UI-Icons;
    src: url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg'); }
 }

然后我用下面的css

加载font-face字形

.glyph-button,.glyph-list,.glyph-textbox,.glyph-number {
    display: inline-block;
    font-family: 'Flat-UI-Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 35px;
}

.glyph-button:before {
    content: "\e033";
}

.glyph-list:before {
    content: "\e00c";
}

.glyph-textbox:before {
    content: "\e019";
}

.glyph-number:before {
    content: "\e031";
}

最后将字形类添加到我的ASP.MVC视图

<h3><span class="glyph-list"></span> Components</h3>

我遇到的问题是字体字形不能在Chrome或Opera中呈现，但它们在IE11和FirefoxDeveloper中呈现。

Chrome / Opera

IE / Firefox

知道问题是什么吗？

Answer 1

最终对mixin的修复非常简单。需要简单清理几个路径Flat-UI-Icons.svg#Flat-UI-Icons到Flat-UI-Icons.svg，并将font-style和font-weight属性添加到-webkit实现。

@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('eot'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }

  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: $font-family;
        src: url('#{$file-path}.svg') format('svg');
        font-weight: $font-weight;
        font-style: $font-style;
    }
  }
}

现在一切都按预期呈现。