7

我喜欢在我的商业作品中使用 Google Webfonts，但它们呈现的锯齿状有点过于粗糙，虽然在 Google 提供的预览中，它们呈现得非常流畅。

看看这个： http ://www.google.com/fonts/specimen/Oxygen

最大的预览看起来非常漂亮和流畅，但是当我将它导入我的页面并使用它时，它的边缘似乎扭曲了，非常锯齿状。谷歌是否使用额外的库来实现这种抗锯齿，还是我做错了什么？

4

3 回答 3

6

如果您从系统（windows/fonts 文件夹）卸载字体，您应该能够看到它流畅。为了克服这一点。不要使用来自谷歌的@import 或直接链接。而是从 www.fontsquirrel.com 下载软件包（整个网络字体工具包）并在你的 css 中使用 @font-face 来获得平滑的字体。

于 2013-11-26T13:30:11.947 回答
3

我不知道完整的技术细节，但 Chrome 可能会以不同于其他浏览器的方式呈现字体。

您可以尝试font-smoothing在 CSS 文件中指定规则。

p {
    -webkit-font-smoothing: antialiased;
}

这条规则经常被使用。有时，人们将它应用于每个选择器（带有 *）：

* {
    -webkit-font-smoothing: antialiased;
}

此属性的三个可能值是：

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

不幸的是，我现在无法重现平滑问题（我不知道为什么，我的计算机没有改变平滑，一切都完全可读，也许是最近的 Chrome 修复，但我找不到任何相关信息）。

进一步阅读：

希望我能帮上忙。:)

于 2015-05-30T20:24:09.637 回答
2

字体根据以下内容呈现不同：

  • 屏幕/显示器分辨率
  • 浏览器
  • 操作系统
  • 使用大小和提示

基于您的字体在 Chrome 和 Firefox 中看起来更糟的事实，您唯一可以做的就是尝试让这些浏览器更好地呈现它们。在没有看到您的代码的情况下，我唯一可以推荐的是：

  • 确保您使用的是体面的重置 css（如下所示： http: //meyerweb.com/eric/tools/css/reset/）。

  • 尝试添加font-weight: normal;字体，看看这是否会有所不同；有时浏览器和框架会尝试为事物添加假粗体。

  • 确保您使用的是字体的实际版本，而不仅仅是应用 CSS 样式。

  • 如果所有其他方法都失败了，那么尝试将字体大小向上/向下小幅度增加，看看字体是否能更好地提示这些大小。

希望这可以帮助！

于 2013-04-19T19:17:36.763 回答