是否有可能创建一个Mac OS特定的CSS来修复字体差异？

Question

我正在与一个设计师合作开展一个项目,他坚持在页面中使用一些特定字体作为标题和各种元素.所以我们使用字体工具包嵌入@ 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文件的基线差异,我会很高兴听到它.

谢谢!

Answer 1

我担心浏览器/操作系统嗅探是你唯一的选择.CSS本身不知道操作系统,也没有听说过专门针对osx的css hack.

这是我检测OSX并将OSX类添加到文档主体的最简单方法,因此您可以专门为OSX覆盖css样式.

if(navigator.platform.match('Mac') !== null) {
    document.body.setAttribute('class', 'OSX');
}

Answer 2

如果设置显式行高不能解决问题，您可以使用后端并检测应用程序中的操作系统（通过用户代理）为每个浏览器提供不同的样式表。你也可以在 JS 中做同样的事情，但是当 JS 加载相关样式时可能会出现 FOUC。