[英]line height rendering with google font
I have a line height issue regarding a google font, specifically josefin sans. 我有关于Google字体(特别是josefin sans)的行高问题。 In MAC Os the line-height is greater than in Windows OS, is there any fix for this, I need them to be the same because Im applying a bottom border.
在MAC Os中,行高大于Windows OS中的行高,对此是否有任何解决方法,我需要使它们相同,因为Im会应用底部边框。 Here's a jfiddle of an example:
这是一个例子:
http://jsfiddle.net/qX3na/ http://jsfiddle.net/qX3na/
h1 span.main {
border-bottom: 1px solid #000;
display: inline-block;
font-family: 'Josefin Sans',sans-serif;
font-size: 4em;
line-height: 74px;
margin: 0 auto;
padding-bottom: 0;
text-transform: uppercase;
}
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<h1 class="clearfix">
<span class="bottom">
<span class="inner">
<span class="left"> </span>
<span class="main">Company name</span>
<span class="right"> </span>
</span>
</span>
</h1>
I had the same problem and I figured out it is a google font api problem, which doesn't manage correctly the different font extensions for each browser/os. 我遇到了同样的问题,但我发现这是一个Google字体API问题,它不能正确管理每个浏览器/操作系统的不同字体扩展名。
I solved it not using google font, but hosting the font and embedding it with fontquirrel webfont generator . 我没有使用Google字体来解决它,而是托管了字体并使用fontquirrel webfont generator嵌入了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.