為什么字體 css 屬性刪除粗體？

Question

我的任務是從計算機生成的 HTML 中刪除不必要的標簽，這些標簽有很多無用的標簽（我只想保留顏色/強/em 信息）。 我遇到了類似於這個 HTML 的東西：

<b>
  <span style="FONT: 20pt &quot;Arial&quot;">
    <strong>bold</strong> not bold <b>bold</b> not bold
  </span>
</b>

對於我（在 chrome 和 firefox 上），它將bold文本顯示為粗體，將not bold文本顯示為非粗體，我很困惑為什么會這樣。 特別是，這使我的任務變得更加復雜：我想我可以刪除沒有顏色/強/em 信息的標簽，所以將其更改為如下所示：

<b>
   <strong>bold</strong> not bold <strong>bold</strong> not bold
</b>

但是現在，一切都是大膽的，而不是以前的樣子。

我試圖找出我可以在FONT樣式中放入什么來重現此行為：

用foo替換Arial保持了行為：

<b>
  <span style="FONT: 20pt foo">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- not bold is actually not bold! 20pt is applied -->
  </span>
</b>

切換大小和字體改變了行為：

<b>
  <span style="FONT: &quot;Arial&quot; 20pt">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
  </span>
</b>

這兩個值中的任何一個本身都沒有做太多：

<b>
  <span style="FONT: &quot;Arial&quot;">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
  </span>
</b>

<b>
  <span style="FONT: 20pt">
    <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
  </span>
</b>

 <b> <span style="FONT: 20pt &quot;Arial&quot;"> <strong>bold</strong> not bold <b>bold</b> not bold </span> </b> <div>Replacing `Arial` with `foo` kept the behaviour:</div> <b> <span style="FONT: 20pt foo"> <strong>bold</strong> not bold <b>bold</b> not bold <:-- not bold is actually not bold: 20pt is applied --> </span> </b> <div>Switching the size and font changed the behaviour;</div> <b> <span style="FONT; &quot.Arial&quot: 20pt"> <strong>bold</strong> not bold <b>bold</b> not bold <:-- everything is bold; 20pt is _not_ applied --> </span> </b> <div>Any of the two values on their own did nothing much;</div> <b> <span style="FONT: &quot;Arial&quot;"> <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold --> </span> </b> <b> <span style="FONT: 20pt"> <strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold --> </span> </b>

誰能解釋這種行為，或者至少告訴我我應該尋找取消外部 styles 的 styles 是什么？

Answer 1

我想我在字體 css 屬性文檔頁面上找到了問題的答案。 它指出：

與任何速記屬性一樣，任何未指定的單獨值都將設置為其相應的初始值（可能會覆蓋先前使用非速記屬性設置的值）。 雖然不能直接通過字體設置，但普通字體的字體大小調整和字體字距調整也將重置為其初始值。

（我的重點）

再往下一點：

初始值作為每個屬性的簡寫：

• 字體樣式：正常
• 字體變體：正常
• 字體粗細：正常
• 字體拉伸：正常
• 字體大小：中等
• 行高：正常
• 字體系列：取決於用戶代理

所以設置font: 20pt arial相當於設置font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt;line-height: normal;font-family: arial

特別是， font-weight從bold （或任何它是）重置為normal 。

因此，為了解決我的基本問題，我應該尋找未指定重量的font標簽。

PS font: arial 20pt沒有這種行為的原因是因為這不是font的允許值，所以它被忽略了：

如果將 font 指定為多個與字體相關的屬性的簡寫形式，則：

• 它必須包含以下值： <font-size> <font-family>
• font-style 、 font-variant和font-weight必須在font-size之前
• font-family必須是最后指定的值。

在font: arial 20pt中，字體系列不是最后指定的值。

Answer 2

Fonts 取決於您的實際瀏覽器和實際字體。 參考： https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Fonts 有一個特定的權重，它對應於 Common weight name mapping 中的一個數字。 然而，一些 fonts，稱為變量 fonts，可以支持具有或多或少精細粒度的權重范圍，這可以讓設計人員更接近地控制所選權重。

fonts你有哪些版權？ 要看。 瀏覽器、電腦、CSS等，這里不能說。 始終指定后備（在本例中為sans-serif ）這可能會有點“棘手”。

底線：將所有這些放在 CSS 中並使用類，以便您實際上可以最好地控制它，當您決定更改事物時總體上更少 HTML 像pt通常不適合視覺但用於打印但在現代 HTML 作為大小使用不多. 現在，如果您決定更改大小，您有很多地方可以更改它，但如果在 CSS 中只有一個。

現在舉一些例子：（無論如何都不包括主題）

 .container { font-weight: normal; margin: 1em; }.container.fonty { font-size: 20pt; font-family: Arial, Helvetica, Verdana, "Gill Sans", sans-serif; }.heavy-one { font-weight: 600; }.heavy-two { font-weight: 900; }

 <div class="container"> <span class="fonty"> <span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold </span> </div> <div class="container"> <span class="fonty heavy-container"> <span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold </span> </div> <p>One with style in tags: (don't do this) <span> <span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;"> <span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bold;">bold</span> not bold</span> </span> </p> <p>Second with style in tags: (don't do this, bolder not great IMHO as it is one step heavier)</p> <span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;"> <span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bolder;">bold</span> not bold</span> <p>Third with style in tags and &lt;strong&gt;: (don't do this) This also shows multiple similar font families and the fallback to &quot;sans-serif&quot; you should always include</p> <span style="font-weight: normal; font-size: 20pt; font-family: Arial, Helvetica, Verdana, sans-serif;"><strong>bold</strong> not bold <strong>bold</strong> not bold</span>