Safari 消除了使用 Typekit 的 H1 标签的字间距答案

【问题标题】：Safari Eliminates Word-Spacing for H1 Tag That Uses TypekitSafari 消除了使用 Typekit 的 H1 标签的字间距
【发布时间】：2012-02-12 17:49:14
【问题描述】：

我正在使用 Typekit 加载 League-gothic 字体，出于某种原因，Safari 完全消除了单词间距，因此单词之间没有间隙。在我使用 css hack 之前，我想知道是否有人可以提供帮助。这是html：

<div class="page-header">
  <h1 data-name="about">About Campaign Title</h1>
</div>

这里是 CSS：

h1 {
    font: 70px/normal "league-gothic", sans-serif;
    text-transform: uppercase;
    color: #4e4e4e;
}

我尝试在整个页面上放置一个 h1 标记，但仍然发现问题。我还将字间距设置为继承和正常，看到相同的结果。

谢谢。

【问题讨论】：

标签： typekit

【解决方案1】：

这原来是新的文本渲染属性的问题。我们正在使用来自 Twitter 的 bootstrap.css，并且 Bootstrap 将文本渲染属性设置为 optimizeLegibility。我们将其设置回 auto 如下：

h1 {
    font: 70px/normal "league-gothic", sans-serif;
    text-transform: uppercase;
    color: #4e4e4e;
    text-rendering: auto;
}

【讨论】：