為什么將已經加粗的文本呈現為“超級加粗”？

Question

使用此CSS：

 body > h1.title { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; font-family: Arial, Sans-Serif; color: orange; text-align: center; text-transform: uppercase; } 

 <h1 class="title">Back To Basics Log</h1> 

呈現像

然后，如果我在<b></b>或<strong></strong>標簽中添加

<h1 class="title"><b>Back To Basics Log</b></h1>

看起來像

超級大膽！ 我希望在已經具有font-weight: bold;內容上使用粗體標簽font-weight: bold; 可以忽略不計，但實際上使其變得更大膽。

有沒有辦法通過CSS獲得第二個版本（我看到的是添加了<b>標簽的那個版本）？

-編輯-

實際上，我只是嘗試注釋掉font-weight：bold;。 並沒有改變！ 我的字體有問題嗎？ 為什么不是font-weight：bold; 工作？

-編輯2-

看起來字體較早的樣式已經是粗體。 當我使用“打火機”作為值時，該值可以正常工作，因此字體似乎已經為粗體。 因此，剩下的唯一問題是“是否可以僅使用CSS獲得超粗體？

Answer 1

您可以使用font-weight: 900代替font-weight: bold 。 因為900是此屬性的最大值，而bold與700相同。

例如：

 .title { font-size: 2em; font-weight: 900; margin: 0.67em 0; page-break-after: avoid; font-family: Arial, Sans-Serif; color: orange; text-align: center; text-transform: uppercase; } 

 <h1 class="title">Back To Basics Log</h1> 

Answer 2

字體粗細的有效關鍵字是：

• lighter
• normal
• bold
• bolder

因此，您可能需要bolder地測試。 或數字字體粗細范圍為100, 200, 300, 400, 500, 600, 700, 800, 900

僅以一定的粗細提供不同的字體，因此您可能需要試驗。 有關更多信息，請參見https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Answer 3

盡管其他文章中的各個鏈接可能會解釋問題，所以SO策略是始終將問題的答案與問題放在同一頁面上，以避免不得不單擊所有這些鏈接。

那我們走了。

答案在瀏覽器的內置樣式表中。 h1具有font-weight: bold默認情況下，和b和strong具有font-weight: bolder .¹

現在有許多不同的字體粗細。 我們沒有只是正常的，大膽的，我們有9點不同的，編號為100至900.²的正常體重是400，和定義bold是700的定義bolder “比的字體粗細更加大膽父”。

因此，如果您的h1的內部帶有b ，則h1將為粗體（即權重700），而內部的b將為粗體（即比700更粗體）。

基本上就是全部。
知道這一點，有多種解決方案：

• 使用只有兩個粗細的字體。
  這不是最好的方法。 如果對用戶計算機的下一個系統更新包含該字體的字體具有更大的權重，該怎么辦？

• 在樣式表中編寫b {font-weight: bold} ，或更確切地說，寫h1 > * {font-weight: inherit} ，這樣，無論如何，h1的內容始終是相同的粗細。

• 只需從h1的內容中刪除<b>標記。 在這種情況下，我看不出有任何理由使用它們。

• 或者，保持一切不變，接受您可以將文本放在更大膽的h1中。 可能有其用途： <h1>Back to <strong>Basics!</strong></h1>

¹雖然並非所有瀏覽器都如此。 這就是為什么我們需要重置樣式表。

²並非所有字體都具有所有字體粗細。 許多只有兩個。

Answer 4

在尋找該問題的答案時，我發現不同的瀏覽器之間存在不同的行為。

（我測試了Chrome（版本72.0.3616.0）和Internet Explorer 11）

<strong><span style="font-weight: bold;">Bold in Chrome, Super Bold in IE</span></strong>

<strong>帶有CSS font-weight: bold 粗體在Chrome font-weight: 700;顯示為粗體 font-weight: 700; IE總結的東西以超粗體 font-weight: 900;結尾font-weight: 900;