适用于 Windows 的 Chrome，@font-face 渲染效果不佳

Question

我在 Windows 版 Chrome 上遇到烦人的字体渲染问题。

这是@font-face 在 Ubuntu 14.04/Chromium 36 下的渲染方式

这就是@font-face 在 Win7/Chrome 35 上的呈现方式

您可能需要点击图片才能看到区别。

这是 CSS：

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Regular.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/SourceSansPro-Regular.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Regular.woff') format('woff'), 
    url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Italic.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/SourceSansPro-Italic.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Italic.woff') format('woff'), 
    url('../fonts/SourceSansPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/sourcesanspro-semibold-webfont.eot');
  src: local('☺'), 
    url('../fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcesanspro-semibold-webfont.svg#sourceSansPro') format('svg'),
    url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff'), 
    url('../fonts/sourcesanspro-semibold-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'SourceSansPro';
  src: url('../fonts/SourceSansPro-Bold.eot');
  src: local('☺'), 
    url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SourceSansPro-Bold.svg#sourceSansPro') format('svg'),
    url('../fonts/SourceSansPro-Bold.woff') format('woff'), 
    url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Regular.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/Heuristica-Regular.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Regular.woff') format('woff'), 
    url('../fonts/Heuristica-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Italic.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Italic.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/Heuristica-Italic.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Italic.woff') format('woff'), 
    url('../fonts/Heuristica-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Heuristica';
  src: url('../fonts/Heuristica-Bold.eot');
  src: local('☺'), 
    url('../fonts/Heuristica-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Heuristica-Bold.svg#heuristica') format('svg'),
    url('../fonts/Heuristica-Bold.woff') format('woff'), 
    url('../fonts/Heuristica-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

我尝试将 SVG 声明移到第二个位置，但没有帮助。

字体在IE11下正确渲染

感谢您的帮助

Answer 1

我为 Chrome 解决抗锯齿问题的唯一方法是强制该浏览器使用 SVG 字体。这并不是将 SVG 声明按特定顺序放置，而是您只提供 Chrome 的 @media 声明并将 SVG 字体放在那里。

例如，您的 CSS：

@font-face {
  font-family: "myfont";
  src: url('myfont.eot') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "myfont";
    src: url('myfont.svg') format('svg');
  }
}

我想我不需要指出 Chrome 是唯一会采用 -webkit-min-device-pixel-ratio 条件的主流浏览器。我发现没有其他规则（或规则组合）可以像这样在 Windows/Chrome 上呈现字体。

现在我要指出几件事。其中之一是 SVG 字体的尺寸更大（相当大），因此受到了影响，因为 Chrome 可以呈现我们不想要的 WOFF 字体。另一件事是您可以“可能”将 SVG 引用放在主要的 @font-face 声明中，因为它只是我们需要它的 Chrome。其他主要浏览器将使用 EOT 或 WOFF，因此实际上没有需要。

有关哪些浏览器支持哪种字体格式的更多信息，请使用Can I Use 页面（您可以选择浏览器版本底部的子类型）。

Answer 2

使用这个

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}