css - 字体粗细为 : bold not have same size 的 Google 字体

Question

我对 Google 字体和字体粗细有疑问。

我的问题是我有一个包含内容可编辑文本的 div，用户可以在其中编辑字体粗细，但字体粗体 CSS 属性在浏览器之间呈现不同...

我可以在 CSS 中使用任何选项来使 font-weight:bold 具有相同的大小吗？

如果您在 FF、Chrome 或 Safari 中检查示例 Fiddle，您将看到文本在 FF 和 Safari 中分为两行，而在 Chrome 中为一行:

https://jsfiddle.net/zgfdudmy/

这里是测试代码:

@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>

谢谢!

Answer 1

该字体在家族中没有粗体变体(根据“https://fonts.google.com/specimen/Satisfy”。因此您要求浏览器解释 font-weight: bold。使用 webfonts 你真的如果需要，应该选择一个包含更强或更粗体变体的系列，并在您的 css 中指定 font-family 与 font-weight，或使用 font-weight 标识符(通常是 200-700 之类的数字)如果包含在家庭中。