在Chrome的自定义字体微胖或保证金(Extra padding or margin on cus

2019-10-29 15:11发布

我有一对夫妇,我下载了一个工具包(TTF,EOT,WOFF,等等)字体。 然而,在Chrome中,他们似乎有额外的paddingmargin并不在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;
}

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

Answer 1:

现场演示

自由的抵达Neue可直接链接源。 保证金0和填充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>


文章来源: Extra padding or margin on custom font in Chrome