谷歌浏览器中字体显示异常

Question

在大多数浏览器中，我正在创建的网站都很好。但是在Google Chrome中，我使用的字体有很多裂缝，根本不能正确呈现。

Chrome： FireFox： 我尝试了各种修复方法，但仍然无法使其与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;
}

- user1763295

---

该问题未透露任何有关字体的信息。很可能问题仅涉及浏览器之间的字体呈现差异（有几个旧问题与此相关）。实际解决方案可能是停止尝试使用太细的字体。 - Jukka K. Korpela

另外，如果您在字体渲染方面遇到问题，请注明您所使用的操作系统（Win、Mac、Linux 等）。字体渲染不仅取决于浏览器，还取决于操作系统。 - Max

Answer 1

你可以按照以下步骤操作： 控制面板 -> 字体 -> 调整 ClearType。 我发现这个解决方案对我很有效。

- mdTahmidh7

Answer 2

尝试以下几点：

• 如果可能，获取字体的官方网页字体文件
• 否则使用像font squirrel generator这样的工具
• 使用bulletproof font face syntax
• 使用Chrome SVG font trick以在Chrome中获得更平滑的渲染效果
• Chrome在某些字体大小下呈现效果更好。尝试设置例如font-size: 16px然后每次增加/减少1px以找到一个折衷方案
• 可能只是因为您的网络字体提示不佳，因此请寻找替代字体

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

- liabru