代码之家 › 专栏 › 技术社区 › Ben

CSS:@FONT face消除混叠

font-face rendering css

Ben · 技术社区 · 14 年前

我有点纠结于@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;}

剩下什么可以让这最后,但涂油,问题消失了?

5 回复 | 直到 9 年前

bzlm 13 年前

使用css3,您可以使用 font-smooth 属性,尽管反锯齿仍由系统默认值控制。如果你真的需要强制一个干净的抗锯齿,不管操作系统是什么,你必须使用sifr自动替换文本与闪存组件。

user9538 14 年前

还可以看到: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

要点是增加 text-shadow: 0 0 1px rgba(0,0,0,0.3); 提供消除混叠的外观。

Steve 11 年前

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

Rowan 13 年前

cufon和typeface.js是两种解决方案,可以聚合和消毒本文讨论的许多HTML5、CSS3和JS解决方案。

每个文件都有一个转换器,允许将字体文件(ttf、otf、wotf)转换为执行您正在尝试执行的操作的脚本——通过Web交付任何字体,消除锯齿。

在这两个当中,我更喜欢Cufon http://cufon.shoqolate.com/generate/

lucasgabmoreno 9 年前

您需要将OTF转换为WOFF:

OTF->工作(Works!)

ttf->otf->woff(工作!)

ttf->woff(不起反失真作用,常见的错误是 Google Fonts )

1)下载 OTF font version

1_ºalternative)如果字体是other,并且是ttf,则将其转换为otf https://everythingfonts.com/ttf-to-otf

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

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

推荐文章

Karol · 组件内部的组件

2 年前

Serge Inácio · Angularjs html标记显示而不是呈现

6 年前

Nikita Romaniuk · 渲染绘制。io图到png

7 年前

yer · 角度4:数据表加载大数据需要时间

7 年前

ulak blade · 如果没有VK\u KHR\u swapchain扩展,如何运行Vulkan API?

7 年前

Bhuvanesh BS · 在当前主题中找不到样式“cardView样式”

7 年前

Ishan Patel · 未在React容器中呈现GET response

7 年前

Vitulus · 深度测试根本不起作用

7 年前

juju · Python/Jinja2-使用HTML语法(Django)通过Python生成的问题呈现列表

7 年前

Nick Kinlen · 使用Axios和React中的列表显示API数据

7 年前