Chrome中的自定义字体的额外填充或边距 [英] Extra padding or margin on custom font in 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中的自定义字体的额外填充或边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！