为何字体CSS属性会取消粗体字重?
P粉662802882
P粉662802882 2023-08-27 23:37:21
0
1
490
<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> 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: &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> 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>
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学习者快速成长!