在Mac OS X上，自定义字体看起来不同(更高)

I am using a custom-font. The font works perfectly on my Windows PC, but not on my Mac (Yosemite OSX). As you can see at the pictures the font is a bit higher on Mac than on Windows. Same on all browsers.

我正在使用定制字体。这种字体在我的Windows电脑上运行良好，但在我的Mac电脑(Yosemite OSX)上却不行。从图片中可以看出，Mac上的字体比Windows上的字体高一点。同样的在所有的浏览器。

I am using border-top in the picture... you can clearly see the problem. On the entire website the font is a bit higher than normal, how can I fix this?

我在图片中使用的是border-top…你可以清楚地看到问题所在。在整个网站上，字体比正常字体高一点，我怎么修正呢?

normal font on windows/mac

正常的字体在windows / mac

custom font on windows

windows上的自定义字体

custom font on mac

自定义字体在mac

CSS-Code:

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');
}

3 个解决方案

#1

http://www.fontsquirrel.com/tools/webfont-generator is one possibility.

http://www.fontsquirrel.com/tools/webfont-generator是一种可能性。

There is a checkbox: Rendering: Fix Vertical Metrics (Normalize across browsers):

有一个复选框:呈现:修复垂直度量(跨浏览器规范化):

At least when the checkbox is checked or not generates different vertical metrics in generated ttf-file.

至少在选中复选框或在生成的ttf文件中不生成不同的垂直度量时是如此。

Fix Vertical Metrics not checked (when inspected in FontCreator):

修正未检查的垂直度量(在FontCreator中检查时):

Fix Vertical Metrics checked:

解决垂直指标检查:

Downloaded kit has also ccs-file, but seems that there are not browser-specific hacks. I assume that this could be handled in font side by fixing metrics.

下载的工具包也有cc文件，但似乎没有特定于浏览器的黑客。我假设这可以通过设置度量来在字体方面处理。

To check my assumption I used font from Typekit.net and compared the generated css file (Typekit fonts are base64-encoded in css) with OSX Chrome and Win Chrome and the base64-encoded font files were identical. This seems to confirm that it is possible to fix font metrics in a cross-browser way.

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

So I think that the accepted answer that suggests generating browser-specific css fixes is not necessary.

因此，我认为建议生成特定于浏览器的css补丁的公认答案是不必要的。

However I don't know how good FontSquirrel is in this normalization. If you test it, please report your findings :)

但是我不知道FontSquirrel在这个规范化中有多好。如果你测试它，请报告你的发现:)

#2

The question is two-parted. Because this is so unrelated to the first part of the question (vertical metrics inconsistency), I add a new answer regarding the other part of the question.

问题是由两部分组成的。因为这与问题的第一部分(垂直度量不一致)是如此无关的，所以我为问题的另一部分添加了一个新的答案。

The text rendering engines make different thickness when applying antialiasing to texts. OSX makes by default thicker glyphs when the default subpixel-antialiasing is used. The amount of "boldness" can be tweaked in OSX settings.

文本渲染引擎在对文本进行反锯齿处理时，会产生不同的厚度。OSX在使用默认较粗的像素反锯齿时，会默认生成字形。“大胆”的程度可以在OSX设置中进行调整。

But if you don't want to ask people to touch their OS and want something that can be done by javascript/css, then there is one option.

但是如果你不想让人们触摸他们的操作系统，想要javascript/css能够完成的事情，那么有一个选项。

OSX renders thinner glyphs when antialiasing type is set to grayscale. Safari and Chrome and Opera makes use of -webkit-font-smoothing: antialiased; and Firefox -moz-osx-font-smoothing: grayscale;.

当抗锯齿类型被设置为灰度时，OSX呈现更薄的字形。Safari和Chrome和Opera使用的是-webkit-font- family: font- family:宋体;和Firefox -moz-osx-font-smoothing:灰度;。

But this may not be enough, because light text in dark background can make glyphs too thin. To make them a bit bolder, you can use specific text-shadow-hack (codepen):

但这可能还不够，因为深色背景中的浅色文字可能会使字形过薄。要让它们更大胆一点，你可以使用特定的text-shadow-hack (codepen):

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

The first part in text-shadow #999 0.1px 0px 0px makes a thin shadow to the right, and the second part #999 -0.1px 0px 0px; to the left. This ensures that the glyphs are not too thin. I find that using text-shadow color #fff made the glyphs too bold in some browsers (eg. in Win FF), so making it a bit darker fixed this.

第一部分是文本阴影#999 0.1px 0px，右边是一个很薄的影子，第二部分是999 -0.1px 0px;到左边。这确保了字形不是太薄。我发现使用文本阴影颜色#fff会使某些浏览器中的符号太粗体(例如。在Win FF)中，所以颜色变深了一点。

While this "boldening" by text-shadow is needed mainly to fix too thin grayscale-antialiased glyphs in OSX, it makes better results also in Windows. In Windows and Linux however *-font-smoothing has no effect, so there the default subpixel-antialiasing is used.

在OSX中，通过文本阴影来“粗体化”主要是为了修复太薄的灰度-抗锯齿的符号，它在Windows中也有更好的效果。然而，在Windows和Linux中，*-font-平滑没有效果，因此使用了默认的子像素反锯齿。

Here you can see the effect in practice in 9 different browsers. For me this produces rather similar boldness:

在这里，您可以在9个不同的浏览器中看到实际的效果。对我来说，这也产生了同样的大胆:

Here are the details of the test (text blocks in the above are snipped from the "Hacked" row:

下面是测试的细节(上面的文本块是从“被黑”行中剪切下来的:

CAUTION: This technique is only suitable in light texts in dark background, preferably in buttons or similar. In large text blocks you have to take into account the legibility of text and usually subpixel-antialiasing provides better legibility. If the colors are other than black and white, you may want to adjust the text-shadow color. In large text blocks using text-shadow can affect to the rendering time.

注意:此技术仅适用于深色背景的浅色文本，最好是按钮或类似的。在大的文本块中，你必须考虑到文本的易读性，并且通常次像素反锯齿提供更好的易读性。如果颜色不是黑色和白色，您可能需要调整文本阴影的颜色。在大型文本块中使用文本阴影会影响渲染时间。

#3

Unfortunately when it comes to embedded fonts it's up to the OS to decide how to render it, and the only real way around it is to have different styles handling rendering changes for each OS. That being said you could try to find a comparable font in the Google Fonts library, they seem to similarly cross-OS. I've never had this issue with them.

不幸的是，当涉及到嵌入式字体时，要由操作系统来决定如何渲染它，而唯一的解决方法是使用不同的样式来处理每个操作系统的渲染更改。也就是说，你可以尝试在谷歌字体库中找到一种类似的字体，它们看起来类似于交叉操作系统。我从来没有和他们有过这样的问题。

If you would like to detect which OS the end-user is accessing your site from you can use a bit of javascript/jQuery to detect this. Then with a bit of hacking you can apply styles to each OS.

如果您想要检测最终用户访问您的站点的哪个操作系统，您可以使用一些javascript/jQuery来检测这一点。然后，你可以对每个操作系统应用样式。

Javascript w/ jQuery

jQuery Javascript w /

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

CSS

CSS

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

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

Essentially in your CSS you need to prefix all styles including the font with the class you applied to body.

本质上，在CSS中，您需要在所有样式(包括字体)前面加上应用于body的类。

#1