不同苹果设备上的字体呈现方式有所不同。太令人沮丧了

发布于 2024-11-01 05:49:08 字数 526 浏览 5 评论 0原文

我希望你们中的一些 css 向导可能遇到了我将要描述的问题。

我为客户网站创建了 css3 按钮,以替换他们当前的图像按钮。这些按钮恰好是深色值背景上的浅色字体(红色背景上的白色文本)。

在 OSX 和 iOS 上,quartz 渲染引擎对此有点抓狂,并且对字体进行抗锯齿处理。大胆变得非常非常非常大胆。

奇怪的是,我在 Mac 上开发,无法复制客户端在多个设备上遇到的渲染问题。我确保我只启用了系统字体,我的字体平滑设置相同,等等...

我发现一篇文章建议修复基于 webkit 的浏览器 此处,并将文本与其背景分开,以便只为文本提供不透明度值。

仍然没有骰子。有人知道这里可能有什么问题吗?

示例图片:

I am hoping some of you css wizards might have run into the problem I'm about to describe.

I've created css3 buttons for a clients website, in order to replace their current image buttons. The buttons happen to be a light font face on a dark value background (white text on a red background).

On OSX and iOS, the quartz rendering engine kind of freaks out about this, and anti-aliases the font to death. Bold become really really really bold.

The strange thing is, I develop on a Mac, and cannot replicate the rendering problem the client is having across multiple devices. I've made sure I only have system fonts enabled, that my font smoothing is set the same, etc...

I found an article that suggested a fix for webkit based browsers here, and have seperated the text from it's background in order to give just the text an opacity value.

Still, no dice. Anyone have idea what could be the problem here?

Sample image:

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

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

发布评论

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

评论(1

晨与橙与城 2024-11-08 05:49:08

我在基于 webkit 的浏览器上遇到了网络字体的粗体问题。我使用以下 CSS 属性来补救它:

-webkit-font-smoothing: antialiased;

似乎是一个比用不透明度来修复字体粗细更好的解决方案......这真的感觉就像一个黑客。

I've encountered bolding issues with web fonts on webkit based browsers. I used the following CSS property to remedy it:

-webkit-font-smoothing: antialiased;

Seems like a better solution than messing with opacity to fix font weights... which really just feels like a hack.

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