為何字體CSS屬性會取消粗體字重?
P粉662802882
2023-08-27 23:37:21
<p>我被要求從電腦生成的HTML中刪除不必要的標籤,該HTML中有很多無用的標籤(我只想保留顏色/strong/em資訊)。我遇到了類似以下HTML的內容:</p>
<pre class="brush:html;toolbar:false;"><b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> 不 bold
</span>
</b>
</pre>
<p>對我來說(在chrome和firefox上),它將<code>bold</code>文字顯示為粗體,將<code>not bold</code>文字顯示為非粗體,將<code>not bold</code>文字顯示為非粗體,我對此感到困惑。特別是,這使得我的任務變得更加複雜:我原以為我可以只刪除沒有顏色/strong/em資訊的標籤,所以將其更改為以下內容:</p>
<pre class="brush:html;toolbar:false;"><b>
<strong>bold</strong> not bold <strong>bold</strong> 不 bold
</b>
</pre>
<p>但現在,所有的文字都變成了粗體,而不是以前的樣子。</p>
<p>我試著找出我可以在<code>FONT</code>樣式中放入什麼來重現這個行為:</p>
<p>將<code>Arial</code>替換為<code>foo</code>保持了這種行為:</p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p>將大小和字體切換後,行為改變了:</p>
<pre class="brush:html;toolbar:false;"><b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
</pre>
<p>兩個值中的任何一個都沒有作用:</p>
<pre class="brush:html;toolbar:false;"><b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> 不 bold <!-- everything is bold -->
</span>
</b>
</pre>
<pre class="brush:html;toolbar:false;"><b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> 不 bold <!-- everything is bold -->
</span>
</b>
</pre>
<p></p>
<p></p>
<p>有人能解釋這種行為嗎,或至少告訴我應該找哪些樣式來取消外部樣式? </p>
我想我找到了我問題的答案,在font 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
標籤。P.S.
font: arial 20pt
沒有這種行為的原因是因為這不是font
的允許值,所以它被忽略:而在
font: arial 20pt
中,字體族並不是最後一個指定的值。