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

【问题标题】：Safari shows larger font size than other broswersSafari 显示比其他浏览器更大的字体大小
【发布时间】：2019-03-19 20:12:50
【问题描述】：

我正在开发一个网站，在该网站上，Mac 的 Safari 上的字体比其他浏览器上的大得多，

该网站使用来自 Google Fonts 的“Open Sans”字体。

例如，这是标题的 CSS sn-p：

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

这在 Chrome、Firefox 和 IE 上显示如下：

但在 Mac 的 Safari 上是这样显示的：

不知何故，Safari 似乎为所有字体添加了 1px。

谁能帮我解决这个问题？

【问题讨论】：

您还确定您没有通过 safari 浏览器设置任何自定义字体大小吗？你能清除缓存并重新检查吗？
网站使用的字体是“Open Sans”，通过谷歌字体dev7.horecaworld.biz/opbergrek-45-5-x-91-cm-hendi-812204
检查元素并确保渲染的字体相同（CSS 属性相同是不够的，浏览器检查器应该告诉你字形是用什么字体渲染的）。 Mac 使用与 Windows 不同的文本渲染，尤其是抗锯齿算法，因此两者永远不会相同。
Chrome 和 Safari 的字体大小在 OSX 上对我来说是一样的。如果您尝试使用rem 单位而不是px 会怎样？
您确定没有在浏览器中放大吗？对我来说它看起来放大了

标签： html css safari

【解决方案1】：

您可能只需要确保字体在所有浏览器上的权重相同。

你可以试试

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

如果它仍然不够薄，你可以尝试使用 font-weight 值。

愿它有帮助:)

【讨论】：

【解决方案2】：

您始终可以使用 JavaScript 检查浏览器是否为 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)

希望有帮助！

【讨论】：

【解决方案3】：

你可以试试

-webkit-font-smoothing: subpixel-antialiased;

或

-webkit-font-smoothing: antialiased;

【讨论】：

我厌倦了，但没有任何改变
你尝试将它添加到什么风格？
我添加到 body 和 html 选择和测试都不起作用然后尝试通过添加到上面的 h2 选择器它也不起作用