CSS自定义字体垂直偏移（错误？） [英] CSS custom font vertical offset (bug?)

问题描述

我使用自定义字体在我的CSS与此方法：

I use custom font in my CSS with this method:

@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;
}

<div class="gabriola">Some texty text here</div>

每个浏览器以自己的方式呈现此字体，垂直偏移顶部和底部如下

Each browser renders this fonts by it's own way with vertical offset top and bottom like this

我做错了什么？感谢

推荐答案

这可能是没有什么你做错了。

It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.

1. 只要确定，请明确设置 vertical-align：baseline 。


2. 不同的文件（ .eof ， .woff ， .ttf ）本身可能未定义相同，因此不同的浏览器正在使用不同的文件并显示差异。 >
   
3. 不确定是否有两个 src 调用正在调用，但您可以尝试删除第二个：

1. Just to be sure, explicitly set vertical-align: baseline.
2. The different files (.eof, .woff, .ttf) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.
3. Not sure if having two src calls is messing things up, but you can try eliminating the second one:

@font-face {
    font-family: 'Gabriola';
    src: url('Gabriola.eot'),
         url('Gabriola.eot?#iefix') format('embedded-opentype'),
         url('Gabriola.woff') format('woff'),
         url('Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这些都是猜测。你将不得不测试＃1，3.如果问题是＃2，我不确定有一个优雅的解决方案。

These are all mere guesses. You will have to test #1, 3. If the issue is #2, I'm not sure there is an elegant solution.

当然， 此网站上的注意事项：

There is, of course, the caveat on this site:

请注意，字体呈现在各种浏览器和
操作系统中可能有很大差异。许多开发人员经历了这样糟糕的结果
从Windows和Internet Explorer，他们避免使用自定义字体
。始终确保在所有
浏览器上仔细检查您的结果，您可以决定质量是否可以接受。

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 gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:

如果您下载了该套件，可以尝试使用
发电机。我们对生成器进行定期调整，
可以改善字体的提示或渲染。

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一致。

Which goes with my point #2.

这篇关于CSS自定义字体垂直偏移（错误？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！