为何字体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> not bold
</span>
</b>
</pre>
<p>对于我来说(在chrome和firefox上),它将<code>bold</code>文本显示为粗体,将<code>not bold</code>文本显示为非粗体,我对此感到困惑。特别是,这使得我的任务变得更加复杂:我原以为我可以只删除没有颜色/strong/em信息的标签,所以将其更改为以下内容:</p>
<pre class="brush:html;toolbar:false;"><b>
<strong>bold</strong> not bold <strong>bold</strong> not 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> not 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> not 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
中,字体族并不是最后一个指定的值。