Safari显示的字体大小比其他浏览器大

Question

我正在网站上工作，mac safari中的字体比其他浏览器大得多，

网站使用Google字体中的“ Open Sans”字体

例如，这是CSS的标题

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
} 

这在chrome，firefox和IE上显示如下，这很好

但是Mac野生动物园显示如下

野生动物园似乎为所有字体增加了1px。

任何人都可以帮助我解决此问题，非常感谢

Answer 1

您可以尝试使用

-webkit-font-smoothing: subpixel-antialiased;

或

-webkit-font-smoothing: antialiased;

Answer 2

您始终可以使用JavaScript检查浏览器是否为Safari，如果是Safari，只需通过1px最小化字体大小即可。我知道这不是常规的处理方式，但只要有效：

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
    return p.toString() === "[object SafariRemoteNotification]";
})(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

此方法取自Javascript - How To Detect Browsers 及其说明：

Safari：构造函数命名中的独特命名模式。这是所有列出的属性中最不耐用的方法，您猜怎么着？在Safari 9.1.3中已修复。因此，我们要检查7.1版之后引入的SafariRemoteNotification，以涵盖3.0版及更高版本的所有Safari。

为了更改字体大小，有一种不推荐使用的方法仍然可以使用：

document.body.fontSize(-1);

如果没有，请尝试使用CSS相对字体大小：

document.body.style.fontSize = ""; //Either Enter Percentages (90%) or EM
//EM Will Automatically Change Font-Size According To Browser
//%-ages Will Change Values Through Math (110% of 16px)

希望有帮助！

Answer 3

也许您只需要确保所有浏览器上的字体都具有相同的权重即可。

您可以尝试类似

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
    font-weigth: 400; /* This should be the normal font-weigth in Chrome */
}

如果它还不够薄，您可以尝试使用font-weigth值。

可能有帮助：）