Question

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

要做到最后这个问题还有什么可做的，但令人讨厌的问题会消失？

Answer 1

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

要点是添加text-shadow: 0 0 1px rgba(0,0,0,0.3);会出现抗锯齿现象。

Answer 2

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

Answer 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

Answer 4

Cufon和Typeface.js是两个解决方案，用于聚合和清理此线程中讨论的许多HTML5，CSS3和JS解决方案。

每个都有一个转换器，允许将字体文件（ttf，otf，wotf）转换为执行您尝试执行操作的脚本 - 通过Web提供任何字体，抗锯齿。

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

Answer 5

您需要将OTF转换为WOFF：

OTF - ＆gt; WOFF（作品！）

TTF - ＆gt; OTF - ＆gt; WOFF（作品！）

TTF - ＆gt; WOFF（在[{3}}中不起作用，是一种常见的错误）

1º）下载Google Fonts

1º替代方案）如果字体是其他字体并且是TTF，请使用OTF font version将其转换为OTF

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

仅使用WOFF而非EOT，SVG，WOFF2等。

CSS：@ font-face抗锯齿

5 个答案: