为什么我的自定义字体在某些浏览器中有位置偏移？ [英] Why does my custom font have a positional offset in some browsers?

问题描述

在我的网站上工作www.monkey-touch.com我开始使用自定义字体的标题和其他几个地方。它看起来很棒，感谢它在所有浏览器上工作的字体 - 松鼠。

When working on my website www.monkey-touch.com I started using a custom font for the headers and in several other places. It looks great and thanks to the font-squirrel it works on all browsers.

然而，我后来意识到，在一些浏览器中的字体渲染不同。 Chrome，Opera和Safari都会使自定义字体略高于其他字体。这不是一个大问题，但当尝试添加另一个页面 http：// monkey- touch.com/sandbox/products.php 与大尺寸的自定义字体，偏移变得越来越大，这是非常讨厌的，因为文本呈现在divs外面。

However, I realized later that the fonts rendered differently in some browsers. Chrome, Opera and Safari all render the custom font slightly higher than others. This is not that big of an issue there, but when trying to add another page http://monkey-touch.com/sandbox/products.php with the custom font of a big size, the offset becomes larger to the point where it is very much a nuisance as the text renders outside of the divs.

请注意，这个问题显然与其他div的错误css样式没有关系，因为即使在body标签中渲染字体，没有其他div也有偏移在此处显示： http://monkey-touch.com/Sandbox2/

Please note that the issue apparently has nothing to do with faulty css styling of other divs as even rendering the font in the body tag with no other divs has the offset as can be seen here: http://monkey-touch.com/Sandbox2/

任何人都可以告诉我为什么会是这样，什么是最好的方法来解决这个问题？

Can anyone tell me why this is and what the best way is to fix the issue?

我的css为font-face ：

My css for the font-face is:

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

}

推荐答案

我想出来了，它是相当奇怪，包括两件事。

I have figured it out and it is rather strange and consists of two things.

1）.tf和.eot我从字体松鼠没有好。从字体网站获取原始的.ttf并将其转换为.eot自己是必要的正确的翻译。我不知道这是否是字体松鼠的错误，因为翻译的差异似乎很任意和奇怪，也看到点2）。

1) The .ttf and .eot I got from the font-squirrel were no good. Getting the original .ttf back from the font-site and converting it to .eot myself was necessary for proper rendition. I do not know whether this is actually font-squirrel's fault because the differences in rendition seem very arbitrary and strange, also see point 2).

2）删除.woff从css的条目。 .woff只是为了安全添加，我不知道这是否被任何使用，但它似乎所有的浏览器仍然呈现它正确。

2) Removing the .woff entry from the css. The .woff was only added for safety, I was not sure whether this was used by any, but it seems all browsers still render it correctly.

这似乎很奇怪，因为涉及的浏览器都使用相同的.ttf（除了IE8和更少使用.eot），但是不同的渲染。还有.woff必须删除，为什么？虽然我已经解决了我的问题，它似乎仍然是一个相当随机和奇怪的问题。如果有人知道更多关于这个东西，我很想知道。

It seems very bizarre, because the browsers involved all use the same .ttf (except IE8 and less which use the .eot) but render it differently. Also the .woff has to be removed, why? ALthough I have solved my problem it still seems a rather random and strange problem. If anyone knows more about this stuff I would love to know.

我希望这个问题将被其他人使用。 font-face在易于使用方面还有很长的路要走，浏览器应该更谨慎地遵守它。

I hope this question will be of use to others to come. font-face has still a long way to go in being easy to use, and browsers should be more wary of proper compliance regarding it.

这篇关于为什么我的自定义字体在某些浏览器中有位置偏移？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！