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相符.

原文地址：https://www.jb51.cc/css/427311.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。