Chrome for Windows，糟糕的@ 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字体只是我们不想要它。另一件事是你可能＆＃39;可能＆＃39;将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);
}