使用谷歌字体渲染行高答案

【问题标题】：line height rendering with google font使用谷歌字体渲染行高
【发布时间】：2013-04-03 21:40:54
【问题描述】：

我有一个关于 google 字体的行高问题，特别是 josefin sans。在 MAC Os 中的 line-height 比在 Windows OS 中大，有什么解决方法吗，我需要它们相同，因为我应用了底部边框。这是一个例子：

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>

【问题讨论】：

是什么让你觉得行高不一样？我的意思是可能存在一些视觉差异（哪个？），但是当您明确设置它时，为什么这取决于line-height？您是否使用开发人员工具检查了计算得到的 line-height 值，结果如何？（在px 中设置line-height 和在em 中设置font-size 是不合逻辑的，可能会产生奇怪的效果，但这可能不是这里的问题。）

标签： windows macos css

【解决方案1】：

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

我没有使用谷歌字体解决它，而是托管字体并使用 fontquirrel webfont generator 嵌入它。

【讨论】：