[英]Extra padding or margin on custom font in Chrome
我有一些字体作为工具包下载(ttf,eot,woff等)。 但是,在Chrome中,它们似乎具有Internet Explorer或Firefox中未显示的额外padding
或margin
。 它似乎是顶部和底部。
我做了所有明显的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;
}
有谁知道要解决的编码技巧或转换/下载的更好方法?
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.