谷歌字体与字体重量：粗体不具有相同的大小

我的问题是，我有内容可编辑的文本股利，用户可以编辑字体粗细，但字体加粗重量CSS属性呈现浏览器之间的不同...

我能有什么选项在CSS中使字体重量：大胆在相同的大小？

如果您在FF，Chrome或Safari的例子小提琴，你会看到文本是在FF和Safari两条线，并与镀铬线：

在这里你有代码测试：

@import url(https://fonts.googleapis.com/css?family=Satisfy); 
 

 
div 
 
{ 
 
    z-index: 2; 
 
    font-family: Satisfy; 
 
    left: 100px; 
 
    top: 100px; 
 
    font-size: 45px; 
 
    color: rgb(204, 204, 204); 
 
    width: 249px; 
 
    height: 64px; 
 
    position: absolute; 
 
    display: block; 
 
} 
 

 
text-div { 
 
    -webkit-line-break: after-white-space; 
 
    display: block; 
 
} 
 

 
*, :after, :before { 
 
    box-sizing: border-box; 
 
} 
 

 
*, a, button, I, input { 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
*, :active, :hover { 
 
    outline: 0!important; 
 
    -webkit-tap-highlight-color: transparent!important; 
 
} 
 

 
.text-align-left { 
 
    text-align: left; 
 
}

<div> 
 
<div class="text-div" style="padding: 0px; display:inherit; transform:matrix(0.9903,-0.139173, 0.139173,0.9903,0,0); -webkit-transform:matrix(0.9903,-0.139173, 0.139173,0.9903,0,0);" spellcheck="false"> 
 
     <span style="font-weight: bold;">Chema Roldán</span> 
 
    </div> 
 
</div>

谢谢！

来源

2016-09-21 chemitaxis

该字体在系列中没有大胆的变体（根据'https://fonts.google.com/specimen/Satisfy'。因此，您要求浏览器解释font-weight: bold。对于web字体，您应该选择包含更强或粗体变体的家族你需要它，在你的CSS指定font-family与font-weight，或使用字体重量标识符（通常是一个数字，如200〜700），如果计入家庭。

来源

2016-09-21 15:34:23

谢谢，但如果没有包含重量字体的选项会发生什么？ – chemitaxis

就像我所说的，浏览器会尝试解释重量，这就是为什么你在浏览器中存在不一致的原因。 –

我有任何选择来解决这种情况吗？谢谢 – chemitaxis

使用numbers而不是bold为您的字体大小的单位。然后你会处理像素尺寸。

700 is the same as bold

来源

2016-09-21 15:34:30

谢谢，但这没有解决我的问题，你可以在这里测试：https：//jsfiddle.net/zgfdudmy/3/ – chemitaxis

谷歌字体与字体重量：粗体不具有相同的大小

回答

相关问题