CSS自定义字体垂直偏移(错误？)

我使用这种方法在CSS中使用自定义字体：

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot');
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'),url('Gabriola.woff') format('woff'),url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.gabriola {
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  background: red;
}

briola">Some texty text here


每个浏览器都按照自己的方式呈现这种字体,垂直偏移的顶部和底部就像这样
我究竟做错了什么？谢谢


最佳答案
你可能没有做错任何事情.以下是一些可能适用的要点,有些可以由您控制,有些则不可以.
>为了确保,明确设置vertical-align：baseline.
>不同的文件(.eof,.woff,.ttf)本身可能没有相同的定义,因此不同的浏览器使用不同的文件并显示差异.
>不确定是否有两个src调用搞乱了,但你可以尝试删除第二个：
@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),url('Gabriola.eot?#iefix') format('embedded-opentype'),url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这些都只是猜测.你将不得不测试#1,3.如果问题是#2,我不确定是否有一个优雅的解决方案.
当然,有关于this site的警告：


Keep in mind that font rendering can vary widely across browsers and

  operating systems. Many developers have experienced such poor results

  from Windows and Internet Explorer that they avoid using custom fonts

  altogether. Always be sure to examine your results closely on all the

  browsers that you can to decide if the quality is acceptable.

更新
This post给出了一些可能解决渲染问题的技巧.这是Font Squirrel,他特别指出：


If you downloaded the kit,you might try regenerating the font with

  the generator. We make periodic adjustments to the generator that

  might improve the hinting or rendering of the font.

但他也证实,


Not to pass the buck,but the most common cause is a bad original

  font.

这与我的观点#2相符.

CSS自定义字体垂直偏移(错误？)

相关文章