21

我对@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;}

要让这个最后但令人讨厌的问题消失，还需要做些什么？

4

5 回答 5

64

另见：http ://www.elfboy.com/blog/text-shadow_anti-aliasing/

要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3);会产生抗锯齿的外观。

于 2010-10-25T06:02:43.047 回答
16

使用 CSS3，您可以使用font-smooth属性，尽管抗锯齿仍将由系统默认值控制。如果您真的需要强制使用干净的抗锯齿，无论操作系统是什么，您都必须使用 sIFR，它会自动将文本替换为 Flash 组件。

于 2010-08-10T17:41:49.667 回答
3

只是一个关于处理抗锯齿的不太常见的 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

于 2013-12-29T04:41:08.773 回答
2

您需要将 OTF 转换为 WOFF：

OTF -> WOFF（有效！）

TTF -> OTF -> WOFF（有效！）

TTF -> WOFF（不抗锯齿，谷歌字体中的常见错误）

1º) 下载OTF字体版本

1º替代）如果字体是其他字体并且是TTF，请使用https://everythingfonts.com/ttf-to-otf将其转换为OTF

2º) 将 OTF 转换为 WOFF https://everythingfonts.com/otf-to-woff

仅使用 WOFF 而不是 EOT、SVG、WOFF2 等。

于 2016-01-05T15:35:59.720 回答
1

Cufon 和 Typeface.js 是两个解决方案，它们聚合和清理了本线程中讨论的大量 HTML5、CSS3 和 JS 解决方案。

每个都有一个转换器，允许将字体文件（ttf、otf、wotf）转换为执行您想要执行的操作的脚本——通过网络传递任何字体，抗锯齿。

两者中，我更喜欢 Cufon http://cufon.shoqolate.com/generate/

于 2011-09-09T06:46:43.087 回答