CSS：@font-face 抗锯齿
Posted
技术标签:
【中文标题】CSS：@font-face 抗锯齿【英文标题】：CSS: @font-face anti aliasing 【发布时间】：2011-03-27 23:07:47 【问题描述】：我对@font-face CSS 选项有点吃力。经过大量阅读、尝试、重试后，我终于找到了一个网站，当你上传字体时，它可以让你成为一个现成的包。它现在正在运行，但似乎字体没有消除锯齿。虽然我在其他网站上看到了这种情况，但我并没有按照我想要的方式呈现标题。
我的 CSS 代码：
@font-face
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;
要让这个最后但令人讨厌的问题消失，还需要做些什么？
【问题讨论】：
【参考方案1】：您需要将 OTF 转换为 WOFF：
OTF -> WOFF（有效！）
TTF -> OTF -> WOFF（有效！）
TTF -> WOFF（抗锯齿无效，Google Fonts 中的常见错误）
1º) 下载OTF font version
1º替代）如果字体是其他字体并且是TTF，则将其转换为OTF https://everythingfonts.com/ttf-to-otf
2º) 将 OTF 转换为 WOFF https://everythingfonts.com/otf-to-woff
仅使用 WOFF 而不是 EOT、SVG、WOFF2 等。
【讨论】：
【参考方案2】：只是一个关于处理抗锯齿的不太常见的 CSS 规则的简短说明。
-webkit-font-smoothing: antialiased;
Webkit 浏览器的字体渲染会略有不同。通常字体看起来更清晰和细。其他值：
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;
演示页面：http://maxvoltar.com/sandbox/fontsmoothing/
不要忘记https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
【讨论】：
【参考方案3】：Cufon 和 Typeface.js 是两个解决方案，它们汇总并清理了本主题中讨论的大量 html5、CSS3 和 JS 解决方案。
每个都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为执行您想做的事情的脚本——通过网络传递任何字体，抗锯齿。
在这两者中，我更喜欢 Cufon http://cufon.shoqolate.com/generate/
【讨论】：
【参考方案4】：使用 CSS3，您可以使用 font-smooth 属性，尽管抗锯齿仍将由系统默认值控制。如果您真的需要强制使用干净的抗锯齿，无论操作系统是什么，您都必须使用 sIFR，它会自动将文本替换为 Flash 组件。
【讨论】：
感谢您的回答，我正在尝试使用 sIFR。 我也可以推荐 Cufón 而不是 sIFR，这样你就不需要 Flash 来查看字体（我考虑的是所有 Flashblock 用户和 iPhone/iPad 用户，除了那些只是被 Flash 惹恼了）：cufon.shoqolate.com/generate developer.mozilla.org/en/CSS/font-smooth: font-smooth 已从 CSS 字体规范中移除，目前不在标准轨道上。一些移动浏览器支持它。 Webkit 支持类似的东西。【参考方案5】：另见：http://www.elfboy.com/blog/text-shadow_anti-aliasing/
要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3); 会产生抗锯齿效果。
【讨论】：
不错的一个！使用白色文本最终会产生发光效果，但这有点酷。 啊哈哈！终于找到你了，Windows先生！ （不是真的，但有点，这就足够了。）以上是关于CSS：@font-face 抗锯齿的主要内容，如果未能解决你的问题，请参考以下文章