Chrome中自定义字体的额外填充或边距答案

【问题标题】：Extra padding or margin on custom font in ChromeChrome中自定义字体的额外填充或边距
【发布时间】：2013-08-15 17:05:36
【问题描述】：

我有几个作为套件下载的字体（ttf、eot、woff 等）。但是，在 Chrome 中，它们似乎有额外的 padding 或 margin，而在 Internet Explorer 或 Firefox 中没有出现。它似乎是顶部和底部。

我做了所有明显的 css 技巧，例如：

margin: 0;
padding: 0;

但这似乎是字体本身的问题。

这是其中一种字体：

@font-face {
    font-family: 'Bebas';
    src: url('bebas.eot');
    src: url('bebas.eot?#iefix') format('embedded-opentype'), url('bebas.woff') format('woff'), url('bebas.svg#BebasRegular') format('svg'), url('bebas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

有没有人知道任何可以修复的编码技巧或更好的转换/下载方法？

【问题讨论】：

你试过 line-height 属性吗？
为什么不使用 TypeKit 或 Google Web Fonts。他们似乎没有任何问题，如填充或边距。我必须告诉你，不同的浏览器引擎呈现不同的东西，所以无论如何你的情况也是如此。
字体通常在顶部和底部有一些空白，因此您无能为力。
我用过line-height;不修复。我需要的字体没有在 Google Web Fonts 或 Typekit 中列出；他们在一个浏览器中有空格但在另一个浏览器中没有空格是正常的吗？

标签： html css google-chrome font-face

【解决方案1】：

FOR LIVE DEMO

Bebas Neue 在直接链接源上可用。 margin 0 和 padding 0 函数似乎工作正常。

tested in Chrome - works
tested in IE7 - works


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript"  src='http://cdn.renderedfont.com/js/renderedfont-0.8.min.js#free'></script>


  body
  {
    margin: 0;
    padding: 0;
  }
  h1
  {
    font-family: "Bebas Neue", Arial; 
    font-size: 40px; 
    color: #99f;
  }



<h1 class="renderedFont">Bebas Neue</h1>

【讨论】：

谢谢，我去看看！ Bebas Neue 在技术上有所不同，但几乎相同——我认为。甚至没有想过要尝试。
@AliCarikcioglu 谢谢！