Photoshop 风格的 CSS 抗锯齿风格
我正在为我们新网站的 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
一个简单的替代方案是 text-shadow,它是一个 css3 属性:
尝试一下设置;通过尝试不同的颜色和模糊值,您可以使非常尖锐的末端看起来前卫的字体变得平滑。
A simple alternative is a text-shadow, which is a css3 property:
Play around with the settings; you can make a very sharp end edgy looking font smooth, by experimenting with different colors and blur values.
CSS3 属性
font-smooth
可能有用:The
font-smooth
CSS3 property may be useful:您可以使用基于脚本的库(想到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.
由于您的网站将在多个操作系统的多个浏览器中显示,因此无法获得一致的字体显示。我认为这取决于操作系统的字体平滑程度。
如果需要,请将这些部分渲染为图像或使用 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.