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

当我应用font-weight:bold样式时，与其他浏览器相比，Safari的字体外观过于粗糙。我试着在一些网站中建议的CSS下面，但它仍然是一样的。Safari字体重量问题，文字太粗体

text-shadow: #000000 0 0 0px;

文本渲染的屏幕截图：

铬
enter image description here

Safari浏览器
enter image description here

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

}

这怎么解决？

来源

2012-02-26 user1184100

只有在Safari浏览器中才能观察到此问题！ – user1184100 2012-02-26 05:09:26

您是否得到解决这个问题？ – 2017-07-06 08:51:01

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

另请注意，系统级别上的不同平台（例如Windows，Mac OS）上的文本呈现可能会有所不同。这种差异是确定的，通常不需要修正。请参阅topic about -webkit-font-smoothing property。

来源

2012-02-26 09:10:59

确实，不提供自定义字体的大胆变体会强制浏览器生成粗体文本的“仿粗体”字体，这可能看起来像有点奇怪。但它不能解决Safari默认渲染所有文本比其他浏览器更胖的问题 - Paul的答案将解决这个问题。 – 2012-12-14 18:36:27

@OlaTuvesson使用操作系统默认渲染渲染页面完全可以。这是不必要的，甚至是有害的，由Web开发人员来控制。此外，供应商前缀的属性将来可能会被删除或更改，因此基于它们的解决方案不具备未来的可行性。 – 2012-12-14 18:45:20

我真的不同意;我的大部分客户都非常热衷于在所有平台上（尽可能）保持品牌标识 - 是的，这包括字体及其重量。此外，Safari中的过度粗暴会使文本更难以阅读，并且通常看起来相当垃圾。 – 2012-12-14 19:19:37

使用-webkit-font-smoothing: antialiased;

的文字阴影招行不通了。

来源

2012-02-26 05:09:30

谢谢保罗！ ..试了上面的CSS，但似乎无法找到任何区别：| – user1184100 2012-02-26 05:13:28

这绝对符合我的经验。万分感谢，并赞扬你和你的房子。 – 2012-03-02 17:30:30

也适用于我（div元素，而不是@ font-face） – Kevin 2012-07-02 23:11:28

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

这个工作在所有浏览器对我来说。

来源

2014-10-22 19:55:25 nuander

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

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

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

您可以从谷歌的字体或任何你的字体是从您的标题包括：它需要双方的常规字体和粗体每个人都应该有一个像400定期和600大胆例如不同的字体，重号：

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

或者使用aboves源代码，粘贴到自己的CSS象下面这样：

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

使用任何你的字体而不是XXX。

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

来源

2017-05-03 08:23:22 Beth

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

回答

相关问题