Safari字体重量问题，文字太粗体

Question

当我应用font-weight:bold样式时，与其他浏览器相比，Safari中的字体外观过于大胆。我按照某些网站的建议尝试了下面的css，但它仍然是相同的。

text-shadow: #000000 0 0 0px;

文字呈现的屏幕截图：

铬

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;

}

如何解决这个问题？

Answer 1

使用-webkit-font-smoothing: antialiased;

文字阴影技巧不再起作用了。

Answer 2

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

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

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

Answer 3

-webkit解决方案不适用于许多谷歌字体，自定义字体和没有预设值的字体的强烈问题。

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

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

您可以在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;}

Answer 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;
}

这适用于所有浏览器。

Answer 5

我找到了解决此特定问题的方法。实际上，以上任何解决方案都可以为我工作。因此，开始检查由safari添加的默认Webkit样式，发现将 -webkit-text-stroke-width 应用于值为 0.5px 的正文。我将其设置为 0！important 并为我解决了该问题。