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

问题描述：

我有几个字体，我下载成套件（ttf，eot，woff等）。但是，在Chrome中，他们似乎有额外的 padding 或 margin ，不会显示在Internet Explorer或Firefox中。

I have a couple of fonts that I downloaded as a kit (ttf, eot, woff, etc). However, in Chrome, they seem to have extra padding or margin that does not show up in Internet Explorer or Firefox. it seems to be top and bottom.

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

I did all the obvious css tricks like:

margin: 0;
padding: 0;

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

But this seems to be an issue with the font themselves.

以下是其中一种字体：

@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;
}

任何人都知道任何编码技巧来解决或更好的方式转换/下载？

does anyone know any coding tricks to fix or a better way to convert/download?

答

FOR LIVE DEMO

Bebas Neue可在直接链接来源使用。

Bebas Neue is available on direct link source. margin 0 and padding 0 functions seem to be working fine.

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>

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

相关推荐