24

我正在使用 Font Awesome 在我的网站上创建图标，虽然它们在带有 Retina 显示屏的 iPod Touch 上看起来很棒，但在我的 iMac 上它们看起来有点模糊且不太明确。

这是一张图片来演示：

在此处输入图像描述

如您所见，Retina Display iPod Touch 上的字体看起来非常漂亮和清晰，但在 iMac 上，它有点蹩脚。

这是什么原因造成的？这与抗锯齿有关吗？对此我能做些什么吗？

4

8 回答 8

21

像这样的问题可能与抗锯齿或暗示有关。如果字体希望在较小的尺寸下看起来不错，则需要在某种网格上对齐。GitHub 的人写了一篇很棒的博客文章，介绍了他们如何在自定义字体中管理清洁度。

我会尝试在网格上对齐它并跟随 GitHub 人的脚步。他们在图标上做得很好。

另外：iPod Touch 和 iMac 之间的图标数字大小是否不同，或者这是不同 DPI 设置的副作用？这也可能是字体渲染的一个问题。

如果可能，请尝试使用您的 DPI 设置。我不使用 Mac，所以我不知道如何在其中更改这些设置。不过，它仍然无法解决底层网格问题。你能编辑有问题的字体吗？

于 2012-09-30T20:01:01.307 回答
13

添加到@sporkbox 的答案中，如果您特别关心 Webkit 浏览器，可以选择使用以下 CSS 选项：

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
于 2012-09-30T20:04:35.637 回答
6

我发现一些浏览器试图通过使线条变粗来模拟粗体字体，从而导致类似于您所描述的情况。你确定这出现在你拥有的地方font-weight: normal;吗？

于 2012-10-23T14:25:33.823 回答
3

最佳跨浏览器解决方案是：

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
于 2015-10-29T15:12:15.067 回答
2

有一个奇怪的技巧有时会起作用，试试：

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

如果您有一个块居中，请尝试检查左偏移量是否为整数。您可以使用 Javascript 来检查和修复它。如果你愿意，我可以帮助你。

于 2015-06-17T09:40:54.087 回答
1

-webkit-透视：1000；

为我修好了

于 2014-09-19T14:50:30.627 回答
1

之前提到的一些解决方案有点/有点成功，但对我来说修复它的是删除（注释掉）font-awesome.css（和font-awesome.min.css）中“fa”类的字体大小继承：

font-size: inherit;

该类的最终结果如下所示：

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-size: inherit; */
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

除此之外，我不得不调整大图标，因为通过注释掉“fa-lg”类中的这一行，它们被推得太远了：

vertical-align:-15%

这个类看起来像这样

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  /* vertical-align: -15%; */
}

我正在使用 Font Awesome 4.7.0

于 2018-02-26T22:50:33.983 回答
0

使用 css 字体平滑：

-webkit-font-smoothing: antialiased;
于 2013-12-30T13:54:05.317 回答