Question

我正在使用@ 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上的文字看起来不太好。当我放大时，它看起来很好。

Answer 1

这里有一些注意事项，首先你有相互冲突的样式设置：

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

它们都应设置为antialiased或none。

您还声明您希望使用粗体字体，但是您没有设置font-weight样式并使用名为HelveticaNeueLight的字体，我想其名称，不是粗体也不是一个大胆的版本。至少你需要设置：

font-weight:bold

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

iPad Safari上的模糊字体问题

1 个答案: