当前位置：文江博客话题详情

iOS 4.2+ webfont (ttf) 的粗体字体粗细渲染错误

发布于 2024-10-18 13:51:46 字数 742 浏览 2 评论 0原文

这个非常具体：在 iOS mobile safari 上错误地指定 ttf 字体渲染 font-weight:bold，使用 iOS 4.2/4.3 Beta 3 或更高版本的 iphone/ipad 打开演示网站：（

这是 Reenie+来自 google 字体的 Beanie)

http://jsbin.com/ojeqe3/16/

屏幕截图

您会看到粗体字体看起来双重渲染。这对于中小字体来说并不重要，但对于大字体/放大来说非常重要。

我的朋友会向苹果报告这个错误。然而，他能做些什么来解决这个错误呢？（杀死文本调整不确定）

更新：这个问题在 iOS5 中未修复。

我知道解决该问题的最佳解决方案是

使用 font-weight:normal （如演示中所示）
使用 -webkit-text-stroke 或 text -shadow 使其看起来“粗体”（加上iPad专用的css - js添加的主体前缀，而不仅仅是媒体查询）

原文

分享到QQ

分享到微博

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

发布评论

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

情绪失控 2024-10-25 13:51:46

从父类继承 font-weight:bold; 的 h1 也有同样的问题。只需使用 font-weight: normal; 覆盖继承的样式；

回复收藏 0 原文

岁吢 2024-10-25 13:51:46

Mobile Safari 的渲染方式似乎有问题 带有字体的仿样式。对于粗体，它会使文本和偏移量加倍，对于大多数字体，它不会被注意到，但对于细字体，它看起来像复视。

在您的情况下，Reenie Beanie不包含粗体样式，并且如果您使用它们作为标题而不将 font-weight 更改为 normal 或 400 它将呈现粗体粗细“人造样式”。

请注意，在某些浏览器中，使用人造样式通常会出现错误且不仅仅在 Mobile Safari 中。

解决方案 1. 使用适当的 `font-weight`

因此，最好的解决方案是将 font-weight 更改为 Google Fonts 提供的字体粗细，快速修复如下：

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */

解决方案 2. 使用确实提供粗体的字体/您想要的斜体样式

另一个解决方案是从网络字体存档中选择一种确实包含粗体样式的字体。 Google 字体中的替代字体看起来很像 Reenie Beanie 并且“更粗体”，例如 Gochi Hand，阳光，或永久标记。

解决方案 3. 使用其他方式伪造假体

如果您确实坚持想要假粗体样式，您可以尝试使用细 text-shadow或文本描边。

It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.

In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".

Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.

Solution 1. Use the appropriate `font-weight`

So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */

Solution 2. Use a font that does provide the bold/italic style that you want

The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.