Question

我为自己的字体使用自定义.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没有这个渲染选项，这意味着我无法修复它。

任何线索都表示赞赏。

其他信息：

我只使用从ttf转换而来的woff
单凭ttf不起作用
字体是Eurostile

Answer 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/

但是我的问题不同，那就是字体不够高。对于您的情况，可能只是字体类型对不同的浏览器有不同的作用

让我知道结果！祝你好运

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

1 个答案: