我正在与设计师合作开展一个项目，他坚持在页面中使用一些特定字体作为标题和各种元素。所以我们使用字体工具包嵌入@ font-face。
它在PC（Firefox，IE 7和8，Chrome，Safari）上运行良好，但在Mac OS（Safari和Firefox）上，字体不会以相同的方式垂直对齐。在浏览网页后，我没有找到任何解决方案，除了“浏览器和平台之间始终存在差异，与之共存”。
我知道跨平台的字体永远不会呈现完全相同，但这次它不像字体看起来更粗体或类似的东西。字体看起来好像它的基线在Windows和Mac OS X之间完全不同。在Mac OS上，字体大小为16px，比PC上高3px。
所以我正在寻找一个备份解决方案：有没有办法专门为Mac OS用户创建一个CSS？我不想只针对Safari，因为Safari PC没问题，Firefox Mac也不行。
或者，如果您有解决方案来修复不需要特定CSS文件的基线差异，我会很高兴听到它。
谢谢！
答案 0 :(得分：13)
我担心浏览器/操作系统嗅探是你唯一的选择。 CSS本身不知道操作系统，也没有听说过专门针对osx的css hack。
这是我检测OSX并将OSX类添加到文档正文的最简单方法，因此您可以专门为OSX覆盖css样式。
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
答案 1 :(得分：0)
如果设置显式行高不能解决问题，您可以使用后端为每个浏览器提供不同的样式表，并在应用程序中检测操作系统（通过用户代理）。你也可以在JS做同样的事情，但是当JS加载相关的样式时，可能会有一个FOUC。
答案 2 :(得分：0)
有一种更简单的方法。 http://rafael.adm.br/css_browser_selector/
它检测浏览器和操作系统，并允许您指定特定于它的类。
答案 3 :(得分：0)
如果你想要接近完美和无痛，你将不得不使用来自在线服务的常见字体或字体，如谷歌的免费字体库或其中一个付费字体库。这些字体经过设计和测试，可在网络上使用。
尝试并包含用户浏览器下载并尝试正确显示的字体很好，但不是完美的，也不会轻松。此外，请严格遵守许可限制 - 确保您的设计人员想要使用的字体已获得适当许可，以便在客户的网站上使用。
如果你必须进行浏览器嗅探并提供多个样式表，那么我会说你的设计已经坏了，需要修改。向您的设计师展示https://fonts.google.com，看看他是否喜欢这些 - 他们在所有现代浏览器中跨平台工作，有些非常灵活。编辑：哦，他们可以免费使用，无需担心许可。
答案 4 :(得分：0)
与@ChrisR答案一样，这是我检测MAC并将MAC类添加到文档主体的最简单方法，因此您可以专门为MAC覆盖CSS样式。
此外，这将保留当前的Body Class，仅保留ADDS Mac
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}