html - Windows 版 Chrome，糟糕的@font-face 渲染

Question

我在 Chrome for Windows 上遇到了一个恼人的字体渲染问题。

这是 @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 字体。另一件事是，您可以“可能”在主 @font-face 声明中删除 SVG 引用，因为我们只需要它用于 Chrome。其他主要浏览器将使用 EOT 或 WOFF，因此实际上不需要它在那里。

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