CSS Safari 字体粗细问题，文字太粗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9450706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari font-weight issue , text too bold
提问by user1184100
When I apply a font-weight:boldstyle, 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
苹果浏览器
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?
如何解决这个问题？
采纳答案by Marat Tanalin
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）的不同平台上，文本呈现可能会有所不同。这种差异是可以的，通常不需要修复。
回答by Paul Armstrong
Use -webkit-font-smoothing: antialiased;
用 -webkit-font-smoothing: antialiased;
The text-shadow trick doesn't work anymore.
文本阴影技巧不再起作用。
回答by Marat Tanalin
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.
问题是你需要在strong标签中指定bold的值。
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 Fonts 或您的字体来自标题中的任何位置；它需要常规字体和粗体字体，每个字体都应该有不同的字体粗细数字，例如 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;}
回答by nuander
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.
这对我来说适用于所有浏览器。
回答by Tarun Singh
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-widthwas applied to body having value 0.5px. I set it to 0!importantand solved the issue for me.
我找到了针对此特定问题的解决方案。实际上，上述任何解决方案都对我有用。于是开始检查 safari 添加的默认 webkit 样式，发现-webkit-text-stroke-width应用于值为0.5px 的 body。我将它设置为0!important并为我解决了这个问题。
