Html Mac OS X上的自定义字体看起来不同（更高）

我使用的是自定义字体。这种字体在我的Windows PC上运行得很好，但在我的Mac（约塞米蒂OSX）上却不行。正如您在图片中看到的，Mac上的字体比Windows上的高一点。在所有浏览器上都是相同的

我正在使用图片中的边框顶部。。。你可以清楚地看到问题所在。在整个网站的字体是有点高于正常，我如何才能修复这个问题

windows/mac上的普通字体

windows上的自定义字体

mac上的自定义字体

CSS代码：

@font-face {
    font-family: "Lovelo Black";
    src: url('../fonts/lovelo_black.otf') format('opentype');
    src: url('../fonts/lovelo_black.ttf') format('truetype');
    src: url('../fonts/lovelo_black.eot') format('eot');
    src: url('../fonts/lovelo_black.svg') format('svg');
    src: url('../fonts/lovelo_black.woff') format('woff');
}

---

不幸的是，当涉及到嵌入式字体时，要决定如何渲染它，唯一真正的方法是让不同的样式处理每个操作系统的渲染更改。也就是说，您可以尝试在库中找到一种类似的字体，它们似乎类似地跨操作系统。我从来没有和他们有过这样的问题

如果您想检测最终用户从哪个操作系统访问您的站点，可以使用一点javascript/jQuery来检测。然后稍加修改，您就可以将样式应用于每个操作系统

Javascript w/jQuery

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
    $("body").addClass("mac");
} else {
    $("body").addClass("pc");
}

CSS

.mac h1 {
    font-family: "Lovelo Black";
    //your mac specific styles
}

.pc h1 {
    font-family: "Lovelo Black";
    //your windows specific styles
}

基本上，在CSS中，您需要在所有样式（包括字体）前面加上应用于

body

的类，这是一种可能性

有一个复选框：呈现：修复垂直度量（跨浏览器标准化）：

至少在复选框被选中或未选中时，会在生成的ttf文件中生成不同的垂直度量

修复未选中的垂直度量（在FontCreator中检查时）：

已检查修复垂直度量：

下载的工具包也有ccs文件，但似乎并没有针对浏览器的黑客攻击。我假设这可以通过修改度量在字体端处理

为了验证我的假设，我使用了Typekit.net中的字体，并将生成的css文件（Typekit字体是用css编码的base64）与OSX Chrome和Win Chrome进行了比较，base64编码的字体文件是相同的。这似乎证实了以跨浏览器的方式修复字体度量是可能的

因此我认为，建议生成特定于浏览器的css修复的公认答案是没有必要的

---

然而，我不知道Fontsquirre在这方面有多好。如果你测试它，请报告你的发现：）

这个问题分为两部分。因为这与问题的第一部分（垂直度量不一致）无关，所以我添加了一个关于问题另一部分的新答案

对文本应用抗锯齿时，文本渲染引擎会产生不同的厚度。当使用默认的子像素抗锯齿时，OSX默认会使图示符变厚。“大胆”的数量可以在中进行调整

但是，如果你不想让人们触摸他们的操作系统，也不想让javascript/css做一些事情，那么有一个选择

当“抗锯齿类型”设置为“灰度”时，OSX渲染更薄的图示符。Safari、Chrome和Opera使用

-webkit字体平滑：抗锯齿

和Firefox

-moz osx字体平滑：灰度

但这可能还不够，因为深色背景中的浅色文本会使字形太薄。要使它们更粗体一些，可以使用特定的文本阴影hack（）：

文本阴影的第一部分
#999 0.1px 0px 0px
在右侧形成一个薄阴影，第二部分
#999-0.1px 0px 0px在左边。这可确保图示符不会太薄。我发现使用文本阴影颜色
#fff
会使某些浏览器中的图示符过于粗体（例如在Win FF中），因此会使其稍微暗一点

虽然文本阴影的这种“加粗”主要是为了修复OSX中过薄的灰度抗锯齿图示符，但在Windows中也可以获得更好的效果。但是，在Windows和Linux中，
*-字体平滑
没有效果，因此使用默认的亚像素抗锯齿

在这里，您可以在9种不同的浏览器中看到实际效果。对我来说，这产生了类似的大胆：


以下是测试的详细信息（上面的文本块是从“Hacked”行截取的：


警告：此技术仅适用于深色背景中的浅色文本，最好是按钮或类似文本。在大型文本块中，您必须考虑文本的易读性，通常亚像素抗锯齿提供更好的易读性。如果颜色不是黑白，您可能需要调整文本阴影颜色。在大型文本块中使用文本阴影的文本块可能会影响渲染时间。
谢谢您的回答！我如何才能仅为osx将字体设置得更低一点？我非常感谢您的回答！我将尝试使用它。感谢您的回答！我将首先尝试使用此选项，并让您知道：）结果：“修复垂直度量”选项有帮助！字体的高度现在在windows和mac上看起来非常完美。但是，字体的粗细取决于浏览器的不同，有什么想法吗@asdf？这可能是因为OS:s之间的别名方法不同。OSX渲染较厚的图示符。最简单的解决方法是使用-webkit字体平滑：例如。它只影响OSX<代码>亚像素抗锯齿
是默认值。如果OSX能够渲染较亮的图示符，您可以尝试使用抗锯齿。仅在标题中使用抗锯齿，并将其保留为大文本块中的默认值，以确保最大的文本易读性。另一种方法是尝试加粗windows字体，例如使用1px文本阴影，但这不是非常推荐的解决方案。对我来说，Windows渲染的厚度似乎合适，你应该尝试一些方法使OSX渲染更轻。在FontSquirrel中还有一个选项Truetype提示。它会影响轮廓与像素栅格的拟合。你可以多读一些。在FontSquirrel中尝试不同的设置（Font Squirrel、Keep Existing、TTFAutohint），如果它产生您想要的结果。
#div1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: #999 0.1px 0px 0px, #999 -0.1px 0px 0px;

  background-color: black;
  width: 100px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  font-family: 'Open Sans';
  font-size: 16px;
}