谷歌浏览器中的字体损坏答案

【问题标题】：Fonts broken in Google Chrome谷歌浏览器中的字体损坏
【发布时间】：2013-12-18 13:53:56
【问题描述】：

在大多数浏览器中，我创建的网站都很好。但在谷歌浏览器中，我使用的字体有很多裂缝，根本无法正确渲染。

铬：

火狐：

我已经尝试了各种修复程序，但仍然无法了解该网站在 Firefox 上的状态。这是我的字体 CSS：

@font-face {
  font-feature-settings:'liga=0';
  font-feature-settings:'liga' 0;
  -moz-font-feature-settings:'liga=0';
  -moz-font-feature-settings:'liga' 0;
  -webkit-font-feature-settings:'liga=0';
  -webkit-font-feature-settings:'liga' 0;
  font-family:'ChampagneLimousines';
  src: url('/Resources/CLB.eot'); /* IE9 */
  src:url('/Resources/CLB.svg') format('svg'),url('/Resources/CLB.woff') format('woff'),url('/Resources/CLB.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
}

【问题讨论】：

这个问题没有透露任何关于字体的信息。很可能这个问题仅与浏览器之间的字体渲染差异有关（关于这个问题有几个老问题）。实际的解决方案可能是停止尝试使用太细的字体。
另外：当您遇到字体渲染问题时，请添加您使用的操作系统（Win、Mac、Linux 等）。字体渲染不仅取决于浏览器，还取决于操作系统。

标签： css google-chrome fonts

【解决方案1】：

有几件事可以尝试：

如果可能，请为您的字体获取官方网络字体文件
否则使用字体松鼠生成器之类的工具
使用bulletproof font face syntax
使用 Chrome SVG font trick 在 Chrome 中实现更流畅的渲染
Chrome 在某些字体大小下的渲染效果比其他字体更好。尝试设置例如font-size: 16px 然后每次递增/递减 1px 以找到折衷方案
可能只是您的网络字体被严重暗示，所以找一个替代字体

请注意，Chrome、Firefox 和 IE 都使用不同的字体渲染引擎，所以它们看起来总是有点不同

【讨论】：