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

Question

我是一名有用的助手，可以进行文本翻译。

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

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

例如，这是标题的CSS代码片段：

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

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

但在Mac的Safari上，它显示为：

某种程度上，Safari 似乎会为所有字体添加 1 像素。

有人能帮我解决这个问题吗？

- Suneth Kalhara

---

你确定你没有通过Safari浏览器设置任何自定义字体大小吗？你能清除缓存并重新检查一下吗？ - Richard Pariath

网站使用的字体是通过谷歌字体库提供的"Open Sans"。https://dev7.horecaworld.biz/opbergrek-45-5-x-91-cm-hendi-812204 - Suneth Kalhara

检查元素并确保呈现的字体相同（仅CSS属性相同是不够的，浏览器检查器应告诉您字形呈现的字体）。Mac使用不同于Windows的文本渲染，特别是抗锯齿算法，因此两者永远不会完全相同。 - skyline3000

在我的OSX上，Chrome和Safari的字体大小看起来是一样的。如果您尝试使用“rem”单位而不是“px”呢？ - miir

你确定你没有在浏览器中放大页面吗？对我来说看起来是放大了。 - Kira Hao

我遇到了同样的问题。 - Rafael Andrade

Answer 1

你可以尝试使用 。

-webkit-font-smoothing: subpixel-antialiased;

或者

-webkit-font-smoothing: antialiased;

- Chillie

---

我尝试过了，但是没有任何改变。 - Suneth Kalhara

你尝试添加到哪种样式中了？ - Chillie

将both i added to body and html selected and tested not worked then tried by adding to above h2 selector it also not worked翻译成中文。 - Suneth Kalhara

Answer 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-如何检测浏览器并且解释如下：

Safari: 命名构造函数的命名模式是独特的。这是列出的所有属性中最不耐用的方法，你知道吗？在Safari 9.1.3中已经被修复。因此，我们检查SafariRemoteNotification，它是在版本7.1之后引入的，以涵盖从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)

希望这有所帮助！

- Da Mahdi03

Answer 3

也许你只需要确保所有浏览器中的字体重量相同。

你可以尝试类似以下的方法：

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

如果还不够细，您可以尝试调整字体粗细值。希望能有所帮助 :)

- Sandro Schaurer