Webfonts 在 Windows、Mac 和 Linux 上的渲染方式不同
我第一次在我正在制作的网站上使用网络字体，我注意到字体的边框在 Windows 和 Linux 上似乎有所不同。 Mac（Linux 和 Mac 上也是如此）。这与浏览器无关，因为所有操作系统上相同版本的 Chrome 和 Firefox 都有这些差异。基本上，在 Windows 上，字符顶部有额外的空间，而在 Linux 和 Mac 上，字符的边界框更接近字符的实际顶部（例如变音符号位于框外）。这自然会改变头寸、保证金等的行为方式。
目前字体的定义如下：
@font-face { font-family: "FranklinGothicHand";
src: url('fonts/franklingothichanddemi-webfont.eot');
src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg');
}
例如，由于这个原因，我无法将文章的装饰首字母大写正确地垂直对齐到文章的第一行，因为它的位置在不同的操作系统上不同。
谁能想到任何解决方案吗？
I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux & Mac (same on Linux & Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.
Currently the font is defined like this:
@font-face { font-family: "FranklinGothicHand";
src: url('fonts/franklingothichanddemi-webfont.eot');
src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg');
}
Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.
Can anyone think of any solution for this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
前几天我自己也在研究这个问题，我来到这个网站并解释了正在发生的事情。 http://www.owlfolio.org/htmletc/legibility-of- Embedded-web-fonts/ 我从这篇文章中得到的结论是，操作系统以不同的方式渲染字体，唯一真正的解决办法显然是调整字体本身，使它们能够处理不同的操作系统渲染样式。不幸的是，我猜测编辑实际字体可能不是一个选择。
I was looking into this myself the other day and i came upon this site with an explanation of what is going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The takeaway i got from the article is that the OS's render the fonts differently and the only real fix is apparently to massage the font itself to make them deal with the different OS rendering styles. Unfortunately editing the actual font is probably not an option i am guessing.
也许可以使用此插件使用 javascript 检测浏览器（请参阅 os.name） http://jquery.thewikies.com/ browser/ ，然后用它来确定要加载哪个样式表 如何使用 Javascript 加载 CSS 文件？
操作系统之间的字体确实很奇怪，渲染不一致并不让我感到惊讶。
Maybe detect the browser with javascript with this plugin (see os.name) http://jquery.thewikies.com/browser/ and then use that to determine which stylesheet you want to load How to load up CSS files using Javascript?
Fonts are really odd between operating systems, it doesn't surprise me that much that the rendering is inconsistent.
我刚刚发现
-webkit-font-smoothing: antialiased;——它似乎在 OSX 上的 Safari 和 Chrome 上做得很好。I just discovered
-webkit-font-smoothing: antialiased;-- it seems to do a good job for Safari and Chrome on OSX.