谷歌字體與字體重量：粗體不具有相同的大小

我的問題是，我有內容可編輯的文本股利，用戶可以編輯字體粗細，但字體加粗重量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

谷歌字體與字體重量：粗體不具有相同的大小

回答

相關問題