使用谷歌字体进行线高渲染

时间:2013-01-28 09:49:56

标签: windows macos css

我有关于谷歌字体的行高问题,特别是josefin sans。在MAC Os中,行高比在Windows操作系统中更高,有没有解决这个问题,我需要它们是相同的,因为我应用了底部边框。这是一个例子:

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">&nbsp;</span> 
                    <span class="main">Company name</span> 
                    <span class="right">&nbsp;</span> 
                </span>
            </span>
        </h1>

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,我发现这是一个谷歌字体api问题,它无法正确管理每个浏览器/操作系统的不同字体扩展名。

我解决了它不是使用谷歌字体,而是托管字体并使用fontquirrel webfont generator嵌入它。