Safari 字体粗细问题，文本太粗答案

【问题标题】：Safari font-weight issue , text too boldSafari 字体粗细问题，文本太粗
【发布时间】：2018-07-24 23:03:33
【问题描述】：

当我应用font-weight:bold 样式时，与其他浏览器相比，Safari 中的字体看起来太粗了。我按照某些网站的建议尝试了下面的 css，但它仍然是一样的。

text-shadow: #000000 0 0 0px;

文字渲染截图：

Chrome

Safari

这是我的 CSS 声明：

p {

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt;  
letter-spacing:-1px; 
font-weight: bold;  
font-family: LektonRegular;  
}

@font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('myfonts/lekton-regular-webfont.woff') format('woff'),
     url(myfonts/lekton-regular-webfont.ttf)  format('truetype'),
     url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;

}

如何解决这个问题？

【问题讨论】：

此问题仅在 safari 中观察到！
你解决了吗？

标签： css safari

【解决方案1】：

使用-webkit-font-smoothing: antialiased;

文本阴影技巧不再起作用。

【讨论】：

谢谢保罗！ ..尝试了上面的css，但似乎找不到任何区别：|
根据我的经验，这绝对有效。对你和你的房子一百万个感谢和一千个赞美。
也对我有用（在 div 元素上，而不是在 @font-face 中）
@qxxx 只是检查一下你是否知道 Windows 版 Safari 已经正式死去几年了。它没有积极的发展。如果您使用它来测试您的网站的 Safari 兼容性，我建议您不要使用它。你最好使用类似browserstack ...或实际的mac :)
即使在 2022 年，它也确实有很大帮助。

【解决方案2】：

为了在浏览器中一致地呈现粗体文本，您的字体应明确包含粗体字符。否则，浏览器可能会尝试根据其正常变体对字符进行粗体变体，并且不同浏览器的结果不一致，因为它们可能具有不同的此类转换算法。

另请注意，在系统级别（例如 Windows、Mac OS）的不同平台上，文本呈现可能会有所不同。这种差异是可以的，通常不需要修复。

另见topic about -webkit-font-smoothing property。

【讨论】：

确实，不提供自定义字体的粗体变体会强制浏览器为粗体文本生成“仿粗体”字体，这可能看起来有点奇怪。但这并不能解决 Safari 默认渲染所有文本比其他浏览器更胖的问题 - Paul 在下面的回答将解决这个问题。
@OlaTuvesson 使用操作系统默认渲染来渲染页面是完全可以的。被Web开发者控制是不必要的，甚至是有害的。此外，以供应商为前缀的属性将来可能会被删除或更改，因此基于它们的解决方案并非面向未来。
我真的不同意；我的大多数客户都非常热衷于在所有平台（尽可能）保持品牌标识——是的，这包括字体及其重量。此外，Safari 中的过度加粗往往会使文本更难阅读，而且通常看起来很垃圾。
客户脱离现实是很典型的。由 Web 开发人员（或项目经理）向客户解释不同的操作系统渲染细节。带前缀的变通办法是死路一条。这与身份无关（徽标通常足够大，即使徽标是矢量而不是光栅化，也不会受到跨操作系统渲染差异的影响）。

【解决方案3】：

-webkit 解决方案不适用于许多 google 字体、自定义字体和没有预设值的字体的严重问题。

问题是你需要在强标签中指定粗体的值。

这可以通过两种方式完成：

您可以包含来自 Google 字体或您的字体在标题中的任何位置；它需要常规字体和粗体字体，每个字体都应该有不同的字体粗细数字，例如 400 常规字体和 600 粗体：

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

或者使用上面的源代码并粘贴到你自己的css中，如下所示：

@font-face {
  font-family: 'XXX';
  font-style: normal;
  font-weight: 600;
  src: local('XXX SemiBold'), local('XXX-SemiBold'), 
  url...
}

用你的字体代替 XXX。

然后在强{font-weight:600;}

【讨论】：

谢谢，这对我有用。我想知道为什么 Mobile Safari 在完全缩小时会使文本变得更加粗体，但在捏放大时却没有。将适当的字体粗细添加到 font-face 会阻止它这样做。

【解决方案4】：

这里没有一个答案对我有用。可能是因为我使用的是 Windows 版本的 Safari 进行测试。我必须在我的 CSS 中包含粗体字体来解决问题。对于原始问题，他需要添加以下内容（注意它使用相同的字体系列名称）

@font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('myfonts/lekton-bold-webfont.woff') format('woff'),
     url(myfonts/lekton-bold-webfont.ttf)  format('truetype'),
     url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}

这对我来说适用于所有浏览器。

【讨论】：

【解决方案5】：

我找到了解决这个特定问题的方法。实际上，上述任何解决方案都对我有用。于是开始检查 safari 添加的默认 webkit 样式，发现 -webkit-text-stroke-width 应用于值为 0.5px 的主体。我将它设置为 0!important 并为我解决了这个问题。

【讨论】：