phantomjs / QtWebKit垂直字体放置问题

Question

我目前正在使用phantomjs从网页生成PDF文件。我在样式表中嵌入了我自己的字体base64编码，并希望在字体上设置其他属性。它们似乎都可以工作，除了顶部的字体渲染有点太多 - 我错过了在这里设置一个特定的属性？

我的css如下所示：

#foo {
     padding: 50px;
}
#bar {
    font-family: MyFontName;
    height: 100px;
    line-height: 100px;
    font-size: 50px;
    background-color: #00ACED;
    color: black;
    width: 300px;
}
@font-face {
    font-family: MyFontName;
     src: url("data:font/opentype;base64,<base64code>) format("opentype")
}

html看起来像：

<div id="foo">
  <div id="bar">This is a test</div>
 </div>

我希望它在父div的中间垂直对齐，它会查看（例如）Chrome垂直对齐（图像中的中间div）。底部是phantomjs输出的结果。顶部是两个层合并为一个 - 看起来像是加载了字体，但只是一点偏移。

我缺少什么属性的想法？