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

When I apply a font-weight:bold style, the look of the font is too bold in Safari when compared to other browsers. I tried below css as suggested in some site but its still the same.

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

text-shadow: #000000 0 0 0px;

Screenshots of text rendering:

文本呈现的屏幕截图：

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

铬

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

苹果浏览器

Here's my css declaration:

这是我的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;

}

How can this be fixed?

怎么解决这个问题？

5 个解决方案

#1

For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.

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

Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.

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

另请参阅有关-webkit-font-smoothing属性的主题。

#2

Use -webkit-font-smoothing: antialiased;

使用-webkit-font-smoothing：antialiased;

The text-shadow trick doesn't work anymore.

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

#3

The -webkit solutions won't work for the strong issue for many google fonts, custom fonts and fonts that don't have preset values.

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

The problem is that you need to specify the value of bold in the strong tags.

问题是您需要在强标记中指定粗体值。

This can be done by two ways:

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

You can either include from Google Fonts or wherever your font is from in your header; it needs both the regular font and the bold font each should have a different font-weight number like 400 regular and 600 bold for example:

您可以从Google字体中添加或在标题中包含字体的位置;它需要常规字体和粗体字体，每个字体应具有不同的字体权重数字，例如400常规和600粗体，例如：

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

Or use the aboves source code and paste into your own css like below:

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

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

Use whatever your font is instead of XXX.

使用您的字体而不是XXX。

Then also in strong {font-weight:600;}

然后也在强{font-weight：600;}

#4

None of the answers here worked for me. Possibly because I am using the windows version of Safari for testing. I had to include the bold font in my CSS to fix the problem. In the case of the original question he would need to add the following (notice it uses the same font-family name)

这里没有任何答案对我有用。可能是因为我使用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;
}

This worked in all browsers for me.

这适用于所有浏览器。

#5

I found a solution for this particular issue. Actually any of above solutions dint work for me. So started checking the default webkit styles added by safari and found that -webkit-text-stroke-width was applied to body having value 0.5px. I set it to 0!important and solved the issue for me.

我找到了解决这个特殊问题的方法。实际上，上述任何解决方案都适合我。所以开始检查safari添加的默认webkit样式，发现-webkit-text-stroke-width应用于值为0.5px的body。我把它设置为0！重要并为我解决了这个问题。

#1