CSS Windows 和 Mac 上的 @font-face 抗锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4060607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face anti-aliasing on windows and mac
提问by pasine
I've used http://www.fontsquirrel.com/to create a @font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
this is the result on Mac with FF, Chrome or Safari (all updated to last version).this is the result on Windows with FF or Chrome.
我已经使用http://www.fontsquirrel.com/创建了一个 @font-face 工具包。
它工作正常，但 windows 上的结果与 mac 上的结果不同。
在 Windows 上，字体似乎有错误的抗锯齿：这是在 Mac 上使用 FF、Chrome 或 Safari（均已更新到最新版本）的结果。这是在带有 FF 或 Chrome 的 Windows 上的结果。
As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?
如您所见，结果并不相同。在 Windows 上，字体更粗更粗。
我该如何解决这个问题？
采纳答案by bobince
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
这看起来就像在 WinXP 中呈现字体的正常丑陋方式。一些（IMO：被误导的）人甚至更喜欢它。
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
要在 XP 上获得一般桌面字体的抗锯齿功能，您必须打开它，从显示属性 -> 外观 -> 效果 -> 使用以下方法平滑屏幕字体的边缘 -> ClearType。默认设置“标准”是老式的 Windows“字体污迹”技术，只会在更大的字体大小下打开，然后经常弄得一团糟。
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
IE7+ 有一个选项——默认开启——始终使用 ClearType 抗锯齿在 Web 浏览器中呈现字体。其他 Web 浏览器将尊重用户配置的字体呈现方法。遗憾的是，这么多人仍然关闭了这个有益的设置，但这并不是你的问题。
(There is nasty hack to make Chrome perform someanti-aliasing on text, which is:
（有一个令人讨厌的黑客让 Chrome对文本执行一些抗锯齿，即：
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
但我真的不会推荐它。）
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get someform of anti-aliasing, is to check that the font in question doesn't have a GASPtable telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editoror with the ttfgasp.execommand-line tool.
当“使用以下方法...”设置设置为“标准”时，您可以做的一件事是尝试使字体获得某种形式的抗锯齿，是检查有问题的字体是否没有一个GASP表格，告诉老式 TrueType 渲染器禁用特定字体大小的抗锯齿。您可以使用字体编辑器或ttfgasp.exe命令行工具更改 GASP 表。
回答by maximo
I too have been plagued with this on Chrome and I think I've just found the answer!
我也在 Chrome 上被这个困扰，我想我刚刚找到了答案！
Chrome didn't like the default fontsquirrel.com generated CSS.
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;
}
To fix, i moved the SVG line:
为了修复，我移动了 SVG 行：
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first...
到列表的顶部。现在我看到了抗锯齿字体！我猜 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;
}
Hope it works for you too. Enjoy!
希望它也适用于你。享受！
回答by Pere
I'm surprised no one mentioned this. Applying a slight -webkit-text-stroke does the trick for me whatever the format (extension) of the font you are using. Some recommend a -webkit-text-stroke: 1px but to me it alters the font look too much (make it too strong). But a 0.5px one makes the stroke almost unnoticeable and it turns on the antialiasing:
我很惊讶没有人提到这一点。无论您使用的字体的格式（扩展名）如何，应用轻微的 -webkit-text-stroke 都对我有用。有些人推荐 -webkit-text-stroke: 1px 但对我来说它改变字体看起来太多（使它太强）。但是 0.5px 使笔触几乎不引人注意，它打开了抗锯齿：
-webkit-text-stroke: 0.5px;
Put it in your css definition for html tag and you're done!
把它放在你的 html 标签的 css 定义中，你就完成了！
回答by Maximilian Motel
There is also a font called Vegur that looks like Myriad Pro but is legal to embed in a website. Hope that helps!
还有一种名为 Vegur 的字体，看起来像 Myriad Pro，但可以合法嵌入网站。希望有帮助！
回答by Sparky
I've done a little research, and I've found a hack that I think makes a difference. Put this in your CSS with your font variables:
我做了一些研究，我发现了一个我认为有所作为的黑客。把它和你的字体变量放在你的 CSS 中：
-webkit-transform: rotate(-0.0000000001deg);
As well, I find that a full-on black (#000000) doesn't help matters either. Using a very dark seemed to help me.
同样，我发现全黑 ( #000000) 也无济于事。使用非常暗的颜色似乎对我有帮助。
回答by apofiSSo
This is code im using to fix "Chrome rendering problem":
这是我用来修复“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');
}
}
:) it works for me...FINALLY!
:) 它对我有用......终于！
回答by Lubo Zviera
Changing setting in Windows or a browser itself is not a solution. When you use @font-face, you want the font to look nice on every screen in every browser, not just in yours.
更改 Windows 中的设置或浏览器本身不是解决方案。当您使用 时@font-face，您希望字体在每个浏览器的每个屏幕上都看起来不错，而不仅仅是在您的浏览器中。
The trick with
诀窍
text-shadow: 0 0 1px rgba(255,255,255,0.1);
or
或者
-webkit-transform: rotate(-0.0000000001deg);
doesn't work anymore in Chrome 16.0.912.63 m, Windows Vista.
在 Chrome 16.0.912.63 m、Windows Vista 中不再工作。
I couldn't find a way to overcome this issue though.
我找不到解决这个问题的方法。
回答by Matt Williams
-webkit-transform: rotate(-0.0000000001deg);
Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – >Zequez Nov 4 at 15:28
-webkit-transform：旋转（-0.0000000001deg）；
更新：不再在 Chrome 15.0.874.106 m 中工作。虽然它在 IE9 和 Firefox 中工作 - >Zequez 11 月 4 日 15:28
UPDATE: This is working (at least for me) in Chrome 15.0.874.121 m.
更新：这在 Chrome 15.0.874.121 m 中有效（至少对我而言）。
IE9 and Firefox shouldn't need it, or be targeted by it since the selector specifies -webkit-.
IE9 和 Firefox 不应该需要它，或者因为选择器指定-webkit-.
