Font-face Chrome 和 Opera 上的字形渲染问题

Question

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

我正在使用最新的 Web Essentials 版本并使用它的 SCSS pre-compiler。我有一个小的 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";
}

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

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

我遇到的问题是字体字形无法在 Chrome 或 Opera 中呈现，但在 IE11 和 FirefoxDeveloper 中可以呈现。

Chrome / 歌剧

IE/火狐

知道问题出在哪里吗？

Answer 1

最后对混入的真正简单修复。需要对 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;
    }
  }
}

现在一切都按预期呈现。

Font-face Chrome 和 Opera 上的字形渲染问题

Font-face glyph rendering issue on Chrome and Opera

html

css

font-face