font-weightのGoogleフォント：太字で同じサイズがありません

Question

Googleフォントとフォントの太さに問題があります。

私の問題は私がいずれかをユーザーがフォントの太さを編集することができますが、フォントの太太字CSSプロパティはブラウザ間で異なるレンダリングされるコンテンツの編集可能なテキスト...

とdiv要素を持つことができているということですCSSのオプションを使用して、フォントウェイト：太字を同じサイズにしますか？ここで

https://jsfiddle.net/zgfdudmy/

あなたは：

あなたはFF、クロムまたはSafariで例フィドルをチェックすると、テキストはFFとSafariでの二行であることがわかります、とChromeで1行でコードはテストされています：

@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の解釈を依頼しています。ウェブフォントでは、より強く、あなたはそれを必要とし、あなたのCSSでfont-family対font-weightを指定するか、または家族に含まれている場合のfont-weight識別子（200から700のような通常の数）を使用します。

Answer 2

利用numbersの代わりに、あなたのフォントサイズのユニットのbold。次に、ピクセルサイズを扱います。

700 is the same as bold