带有间隙的文本（@font-face: *.woff）渲染

【问题标题】：Text (@font-face: *.woff) rendering with gaps带有间隙的文本（@font-face: *.woff）渲染
【发布时间】：2014-09-15 16:36:28
【问题描述】：

我为我的字体使用自定义 .woff。然而，中间词会增加假发间隙（想想标签、标签、标签）。

由于声望低，我无法截图，但基本效果是：

"He                 llo I'm trying t                 o type a sen          tence he          re"

代替

"Hello I'm trying to type a sentence here"

在 chrome 中我解决了这个问题：

a, body, h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeSpeed !important;
}

但 Firefox 没有该渲染选项，这意味着我无法修复它。

感谢任何潜在客户。

附加信息：

我只使用 woff，从 ttf 转换而来
单独的 ttf 不起作用
字体为 Eurostile

【问题讨论】：

请注意，stackoverflow 去除了文本中的大量空格，间隙为 2-3 个单词的大小。

标签： css firefox rendering font-face text-rendering

【解决方案1】：

我建议您针对不同的目的使用不同的扩展程序。由于不同的浏览器不会以相同的方式呈现字体。

有办法将这些字体生成为 .ttf/.eot/svg 格式

理想情况下，字体 css 应该是这样的所有格式

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

最后，有时字体不够好以至于无法正确呈现，那么您将不得不回退到谷歌字体。

我以前用过论文

http://everythingfonts.com/otf-to-eot http://www.font2web.com/

但是我的问题不同，是字体不够高清。对于您的情况，可能只是字体类型对不同浏览器的工作方式不同

请让我知道结果！祝你好运

【讨论】：