Linux中的填充问题＆amp; Mac浏览器与Windows比较@ font-face

Question

我在网络项目中使用的字体很少。当我在Windows浏览器中时，一切都很完美，当我在Linux和Mac浏览器中时，字体放置在距离中心稍远的地方，看起来像是用几个像素向上推。这让我很烦，因为它真的很明显，设计看起来很怪异。

有解决方案吗？也许是一个黑客或其他东西......

这里是我的按钮的代码片段@ font-face fonts http://db.tt/JoqiqK8i，我不知道如何将字体放入jsfiddle，这就是我上传到dropbox的原因。

Answer 1

我也遇到过这个问题，不仅是Linux，还有iOS / Android（我的项目是Phonegap应用程序）。我在这里或其他地方找到的解决方案都没有帮助我有效地解决它，我不得不在CSS中使用填充补偿这是一个痛苦的经历。

所以，我尝试再次解决它，使用Fontforge挖掘字体文件指标设置，我找到了它的根本原因和解决方案。

以下是修复步骤：

1. 使用FontForge
打开有问题的字体文件（TTF或WOFF）
2. 打开菜单元素＆gt;字体信息......

3. 选择设置项OS / 2＆gt;选项卡指标。

   如果您的字体有缺陷，HHead（Ascent Offset，Descent Offset，Line Gap）输入框将设置为0以外的某些值

4. 将所有HHead *值设置为0。行
5. 然后您可以生成（文件＆gt;生成字体）字体到各种Web字体文件（TTF - TrueType，WOFF，SVG）。请注意，在生成字体验证之前，请忽略任何警告。

我尝试修复问题中包含的字体，它确实有用！在Dabblet Here's a demo上并排显示原始字体和固定字体（差异可能只在Mac和Linux上看到）。

我不是常规的Stackoverflow海报，因此我无法发布许多参考链接和图像。您可以访问my blog post了解更多信息和详情。

Answer 2

我的一位朋友最近遇到了同样的问题。

修复方法是：使用em代替px。元素px在每个浏览器中的解释都有所不同，而em总是相同的（至少：我还没有找到一个不同的浏览器）。

祝你好运！

P.S。如果这不起作用，请将它放在服务器上，以便我们可以使用“inspect element”。

Answer 3

所以，我找到了这个问题的答案。一个名叫rteslya的家伙告诉了我，这是他的帖子：

我前几天遇到过类似的问题。具有相同行高值的文本的不同垂直对齐。 Windows还可以，但Mac Safari疯狂了。我使用fontsquirrel.com/来生成我的@ font-face集。问题出在选项“BASIC”中。使用此选项生成的字体在Mac中具有不同的行高。解决方案（这对我有帮助，但可能对您没有帮助）：选择“EXPERT ...”然后在字段“Font Formats：”中选择“EOT Lite”“Subsetting：”选择“Custom Subsetting ...”我留下的其他字段默认值。