為何字體CSS屬性會取消粗體字重?
P粉662802882
P粉662802882 2023-08-27 23:37:21
0
1
489
<p>我被要求從電腦生成的HTML中刪除不必要的標籤,該HTML中有很多無用的標籤(我只想保留顏色/strong/em資訊)。我遇到了類似以下HTML的內容:</p> <pre class="brush:html;toolbar:false;"><b> <span style="FONT: 20pt &quot;Arial&quot;"> <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: &quot;Arial&quot; 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: &quot;Arial&quot;"> <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>
P粉662802882
P粉662802882

全部回覆(1)
P粉283559033

我想我找到了我問題的答案,在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-weightbold(或其他值)重設為normal

所以為了解決我根本問題,我應該尋找沒有指定字重的font標籤。

P.S. font: arial 20pt沒有這種行為的原因是因為這不是font的允許值,所以它被忽略:

而在font: arial 20pt中,字體族並不是最後一個指定的值。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!