26

我使用http://www.fontsquirrel.com/创建了一个 @font-face 工具包。
它工作正常，但 windows 上的结果与 mac 上的结果不同。
在 Windows 上，字体似乎有错误的抗锯齿：
Mac 上的字体这是在 Mac 上使用 FF、Chrome 或 Safari（均已更新到最新版本）的结果。
Windows 上的字体这是带有 FF 或 Chrome 的 Windows 上的结果。

如您所见，结果并不相同。在 Windows 上，字体更粗更粗。
我该如何解决这个问题？

4

8 回答 8

48

我也在 Chrome 上被这个问题困扰，我想我刚刚找到了答案！

Chrome 不喜欢默认的 fontsquirrel.com 生成的 CSS。

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
         url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
    font-weight: normal;
    font-style: normal;
}

为了解决这个问题，我移动了 SVG 行：

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

到列表的顶部。现在我看到了抗锯齿字体！我猜 Chrome 想成为第一……

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

希望它也适合你。享受！

于 2012-01-27T23:08:20.427 回答
14

我很惊讶没有人提到这一点。无论您使用的字体的格式（扩展名）如何，应用轻微的 -webkit-text-stroke 对我来说都是诀窍。有些人推荐 -webkit-text-stroke: 1px 但对我来说它改变了字体看起来太多（让它太强）。但是一个 0.5px 的笔触使笔触几乎不引人注意，并且它打开了抗锯齿：

-webkit-text-stroke: 0.5px;

把它放在你的 html 标签的 css 定义中，你就完成了！

于 2012-11-30T00:04:14.317 回答
9

这看起来就像在 WinXP 中呈现字体的正常丑陋方式。一些（IMO：被误导的）人甚至更喜欢它。

要在 XP 上获得桌面字体的抗锯齿，您必须打开它，从显示属性 -> 外观 -> 效果 -> 使用以下方法平滑屏幕字体的边缘 -> ClearType。默认设置“标准”是老式的 Windows“字体涂抹”技术，只会费心打开较大的字体，然后经常弄得一团糟。

IE7+ 有一个选项——默认开启——总是使用 ClearType 抗锯齿在 Web 浏览器中呈现字体。其他网络浏览器将尊重用户配置的字体渲染方法。很遗憾，还有这么多人关闭了这个有益的设置，但这并不是你的问题。

（有一个讨厌的 hack 可以让 Chrome 对文本执行一些抗锯齿，即：

text-shadow: 0px 0px 1px rgba(0,0,0,0);

但我真的不推荐它。）

当“使用以下方法...”设置设置为“标准”时，您可以做的一件事是尝试使字体获得某种形式的抗锯齿，检查有问题的字体没有一个GASP表格，告诉老式 TrueType 渲染器在特定字体大小下禁用抗锯齿。您可以使用字体编辑器或ttfgasp.exe命令行工具更改 GASP 表。

于 2010-10-30T21:34:09.750 回答
5

还有一种名为 Vegur 的字体，看起来像 Myriad Pro，但嵌入网站是合法的。希望有帮助！

于 2010-11-01T11:28:45.993 回答
4

我做了一些研究，发现了一个我认为会有所作为的 hack。把它和你的字体变量一起放在你的 CSS 中：

-webkit-transform: rotate(-0.0000000001deg);

同样，我发现全黑 ( #000000) 也无济于事。使用非常暗的似乎对我有帮助。

于 2011-01-16T19:14:34.757 回答
3

更改 Windows 或浏览器本身的设置不是解决方案。当您使用 时@font-face，您希望字体在每个浏览器的每个屏幕上都看起来不错，而不仅仅是在您的浏览器中。

诀窍

text-shadow: 0 0 1px rgba(255,255,255,0.1);

或者

-webkit-transform: rotate(-0.0000000001deg);

在 Chrome 16.0.912.63 m、Windows Vista 中不再工作。

我找不到解决这个问题的方法。

于 2011-12-14T03:37:45.047 回答
2

这是我用来修复“Chrome 渲染问题”的代码：

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) 它对我有用……终于！

于 2013-02-21T00:16:07.390 回答
0

-webkit 转换：旋转（-0.0000000001deg）；

更新：不再在 Chrome 15.0.874.106 m 中工作。虽然它在 IE9 和 Firefox 中确实有效 – > Zequez 11 月 4 日 15:28

更新：这在 Chrome 15.0.874.121 m 中有效（至少对我而言）。

IE9 和 Firefox 不应该需要它，或者因为选择器指定-webkit-.

于 2011-11-23T15:21:56.580 回答