I have a line height issue regarding a google font, specifically 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. Here's a jfiddle of an example:
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.
I solved it not using google font, but hosting the font and embedding it with fontquirrel webfont generator .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.