iPad Safari 字体模糊问题答案

【问题标题】：Blurry font issue on iPad SafariiPad Safari 字体模糊问题
【发布时间】：2014-03-03 09:59:08
【问题描述】：

我正在使用@font-face 加载正确加载的网络字体：

@font-face {
font-family: 'HelveticaNeueLight';
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot');
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg');

font-weight: normal;
font-style: normal;
font-variant:normal;

}

我还有另一个类来设置文本样式和加粗：

.BusinessLeftHeader{
    font-family: HelveticaNeueLight;
    font-size: 32px;
    padding: 30px 0 5px;
    text-align: center;
    line-height: 1;
    font-variant: normal;    
}

现在，问题是 iPad 2 上的字体看起来不粗。看起来文本显示模糊效果或类似的东西。

我也使用此代码来解决此问题。

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

但同样，仍然遇到同样的问题。 iPad 2 上的文字看起来不太好。当我放大时，它看起来很好。

【问题讨论】：

试着给你的容器均匀的宽度和高度，如果宽度是 423 像素，那么让它变成 424 像素。

标签： css font-face ipad-2

【解决方案1】：

这里有几个注意事项，首先你有冲突的样式设置：

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

它们都应该设置为antialiased 或none。

您还声明您希望使用粗体字体，但是您尚未设置font-weight 样式并且正在使用一种名为HelveticaNeueLight 的字体，我想象它的名字，既不是粗体也不包括粗体版本。至少你需要设置：

font-weight:bold

此外，问题可能是您使用的自定义字体未打包为粗体版本。在这种情况下，浏览器通常会“解释”它应该如何使用可用的字体呈现粗体版本，从而产生意想不到的结果。您可能想要包含字体的粗体版本或引用特定的粗细（如果包含）。

【讨论】：