Html Web字体在Windows、Mac和Linux上呈现方式不同

我第一次在我正在制作的网站上使用webfonts，我注意到字体的边框在Windows和Linux&Mac上似乎不同（在Linux&Mac上也是如此）。这并不依赖于浏览器，因为所有操作系统上相同版本的Chrome和Firefox都有这些差异。基本上，在Windows上，角色顶部有额外的空间，而在Linux和Mac上，角色的边界框更接近角色的实际顶部（例如，UMLAUT位于框外）。这自然会改变位置、边距等的行为方式

当前字体的定义如下：

@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'); } @字体面{字体系列：“弗兰克林戈西坎德”； src:url（'font/franklingothichanddemi webfont.eot'）； src:url（'font/franklingothichandemi webfont.eot？iefix'）格式（'eot'）， url（'fonts/FRANKLINGOTHICHANDEMI webfont.woff'）格式（'woff'）， url（'fonts/FRANKLINGOTHICHANDEMI webfont.ttf'）格式（'truetype'）， url（'fonts/FRANKLINGOTHICHANDEMI webfont.svg#webfontLgJOAlmK'）格式（'svg'）； } 例如，由于这个原因，我无法将文章的装饰性首字母大写字母与文章的第一行垂直对齐，因为它在不同的操作系统上的位置不同

---

有人能想出解决这个问题的办法吗？

也许可以用这个插件检测带有javascript的浏览器（参见os.name），然后用它来确定要加载哪个样式表

---

操作系统之间的字体真的很奇怪，渲染不一致并不奇怪。

前几天我自己也在研究这个问题，我来到这个网站解释了发生了什么。我从这篇文章中得到的收获是，操作系统呈现字体的方式不同，唯一真正的解决办法显然是按摩字体本身，使其能够处理不同的操作系统呈现风格。不幸的是，我猜编辑实际字体可能不是一个选项。

我刚刚发现

-webkit字体平滑：抗锯齿--它似乎在OSX上为Safari和Chrome做了很好的工作