Photoshop 风格的 CSS 抗锯齿风格

发布于 2024-11-01 23:39:11 字数 169 浏览 5 评论 0原文

我正在为我们新网站的 PSD 模型设置样式表。模型中的大部分文本都使用了 Photoshop 中的“锐利”抗锯齿方法。

重新创建这些 Photoshop 抗锯齿方法的最佳方法是什么?设置不同的字体粗细似乎很遥远。

顺便说一句,字体是 Arial,所以这里没有有趣的 @font-face 内容

I'm in the process of setting up a stylesheet for a PSD mockup we have of a new website. Most of the text in the mockup uses the 'sharp' anti aliasing method from photoshop.

What's the best way to re-create these kind of photoshop anti aliasing methods? Setting different font-weights seem way off..

Btw, the font is Arial so no funny @font-face stuff going on here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

倾`听者〃 2024-11-08 23:39:11

一个简单的替代方案是 text-shadow,它是一个 css3 属性:

#foo {
    /* text-shadow: [color] [horizontal offset] [vertical offset] [blur] */
    text-shadow: #fff 0 1px 0;
}

尝试一下设置;通过尝试不同的颜色和模糊值,您可以使非常尖锐的末端看起来前卫的字体变得平滑。

A simple alternative is a text-shadow, which is a css3 property:

#foo {
    /* text-shadow: [color] [horizontal offset] [vertical offset] [blur] */
    text-shadow: #fff 0 1px 0;
}

Play around with the settings; you can make a very sharp end edgy looking font smooth, by experimenting with different colors and blur values.

成熟的代价 2024-11-08 23:39:11

CSS3 属性 font-smooth 可能有用:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 

The font-smooth CSS3 property may be useful:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
霊感 2024-11-08 23:39:11

您可以使用基于脚本的库(想到cufón)来自定义抗锯齿和其他文本渲染效果。请注意,大多数(如果不是全部)此类解决方案仅适用于标题等内容,不适用于全文。

You can use a script-based library (cufón comes to mind) to customize anti-aliasing and other text rendering effects. Note that most (if not all) such solutions are only appropriate for headers and whatnot, not the full body text.

雪化雨蝶 2024-11-08 23:39:11

由于您的网站将在多个操作系统的多个浏览器中显示,因此无法获得一致的字体显示。我认为这取决于操作系统的字体平滑程度。

如果需要,请将这些部分渲染为图像或使用 Cufon 或 sIFR。

我过去也做过,如果字体有点粗糙,添加一个微妙的 CSS3 text-shadow 这使它看起来更平滑。

Because you website is going to be shown in multiple browsers in multiple OS's, there is no way to get a consistent font display. I think it is down to the OS with regards to font smoothing.

If you require it, render the portions as an image or use Cufon or sIFR.

What I have also done in the past, if the font is a little rough, add a subtle CSS3 text-shadow which makes it look much smoother.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文