macos 是否可以创建一个 Mac OS 特定的 CSS 来修复字体差异？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4702381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to create a Mac OS specific CSS to fix font difference?
提问by Gabriel
I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with @font-face.
我正在与一位设计师合作一个项目，他坚持使用一些特定的字体作为标题和页面中的各种元素。所以我们使用字体工具包来嵌入@font-face。
It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".
它在 PC（Firefox、IE 7 和 8、Chrome、Safari）上运行良好，但在 Mac OS（Safari 和 Firefox）上，字体的垂直对齐方式不同。在网上查看后，除了“浏览器和平台之间总是存在差异，忍受它”之外，我没有找到任何解决方案。
I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.
我知道不同平台的字体永远不会完全相同，但这一次不是字体看起来更粗或类似的东西。字体看起来好像它的基线在 Windows 和 Mac OS X 之间完全不同。在 Mac OS 上，字体大小为 16px，比 PC 上的字体高 3px。
So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.
所以我正在寻找一个备份解决方案：有没有办法专门为 Mac OS 用户创建 CSS？我不想只针对 Safari，因为 Safari PC 可以，而 Firefox Mac 不行。
Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.
或者，如果您有一个解决方案来修复不需要特定 CSS 文件的基线差异，我会很高兴听到它。
Thanks!
谢谢！
采纳答案by coreyward
If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.
如果设置显式行高不能解决问题，您可以使用后端为每个浏览器提供不同的样式表，并检测应用程序中的操作系统（通过用户代理）。你也可以在 JS 中做一些同样的事情，但是在 JS 加载相关样式时可能会有一个 FOUC。
回答by ChrisR
I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.
恐怕浏览器/操作系统嗅探是您唯一的选择。CSS 本身不了解操作系统，我也从未听说过专门针对 osx 的 css hack。
This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.
这是我检测 OSX 并将 OSX 类添加到文档正文的最简单方法，以便您可以专门覆盖 OSX 的 css 样式。
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
回答by MrMaksimize
There's an easier way. http://rafael.adm.br/css_browser_selector/
有一个更简单的方法。 http://rafael.adm.br/css_browser_selector/
It detects the browser and os and allows you to specify classes specific to it.
它检测浏览器和操作系统，并允许您指定特定于它的类。
回答by jeffszusz
If you want close-to-perfect and painless, you're going to have to use the common fonts or fonts from an online service such as Google's free font library or one of the for-pay font libraries. These fonts have been designed and tested to work on the web.
如果您想要接近完美和轻松，您将不得不使用常见字体或来自在线服务的字体，例如 Google 的免费字体库或付费字体库之一。这些字体经过设计和测试，可以在网络上使用。
Experimenting and including fonts for the user's browser to download and try to display correctly is fine, but won't be perfect and won't be painless. Also, be very careful with licensing restrictions - make sure the fonts your designer wants to use are properly licensed for use on the client's website.
试验并包含供用户浏览器下载并尝试正确显示的字体很好，但不会完美，也不会轻松。此外，要非常小心许可限制 - 确保您的设计师想要使用的字体获得了在客户网站上使用的正确许可。
If you have to do browser sniffing and serve multiple stylesheets, at this point I'd say your design is broken and needs to be revised. Show https://fonts.google.comto your designer and see if he likes any of those - they work cross-platform in all modern browsers and some are very slick. EDIT: Oh, and they're free to use without worries of licensing.
如果您必须进行浏览器嗅探并提供多个样式表，此时我会说您的设计已损坏，需要修改。向你的设计师展示https://fonts.google.com，看看他是否喜欢其中任何一个——它们在所有现代浏览器中跨平台工作，有些非常流畅。编辑：哦，他们可以免费使用而无需担心许可。
回答by Chris Cullen
Same as @ChrisR answer this is the easiest way for me to detect MAC and add the MAC class to the document body so you can override css styles for MAC specifically.
与@ChrisR 回答相同，这是我检测 MAC 并将 MAC 类添加到文档正文的最简单方法，以便您可以专门覆盖 MAC 的 css 样式。
Additionally this keeps the current Body Class and just ADDS Mac on to it
此外，这会保留当前的 Body Class，并在其上添加 Mac
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}
