Html 字体大小未被覆盖答案

【问题标题】：Html font-size is not overridenHtml 字体大小未被覆盖
【发布时间】：2016-01-17 23:20:24
【问题描述】：

我需要添加一些样式以按百分比影响整个 html 文本大小。使用以下内容，我只能更改具有默认字体大小的文本，而不能更改具有固定文本大小的文本。

我的html：

<style type="text/css">body{font-size:300%;}</style>
<body>
The <font style="color:#ff0000">company has been a </font>long way<strike> in the most part</strike> of a good <u>idea tying </u>I was <b>wondering</b> if you <font style="font-size:20px">are not the</font> intended <font style="background-color:#00ff00">recipient</font> of the <i>most</i> important <font style="color:#ffbf00">thing</font> 
</body>

句子“不是”不受影响，因为它有自己的字体大小20px。想要的是乘以 3（第一行中的 300%）。

【问题讨论】：

在它开始下雨之前。添加一个小提琴，让其他人清楚你的问题......
我做了一个：jsfiddle.net/u1tkh5bd
<font> 已过时，请勿使用。而font-size 不是这样工作的。如果您想要相对单位，请使用 em 而不是 px。
把你的字体标签改成span的jsfiddle.net/u1tkh5bd/1

标签： html css font-size

【解决方案1】：

CSS 和内联调用完全按预期工作。

body 上的 CSS 被优先于它的内联 CSS 片段覆盖。

300% 是一个值，而不是一个乘数。

body {
  font-size: 300%;
}

The <font style="color:#ff0000">company has been a </font>long way<strike> in the most part</strike> of a good <u>idea tying </u>I was <b>wondering</b> if you 
<font style="font-size:20px">are not the</font> 
intended <font style="background-color:#00ff00">recipient</font> of the <i>most</i> important <font style="color:#ffbf00">thing</font>

另一种方法是使用 CSS3 calc() 函数，您可以在其中指定您希望值 20px 乘以 3。

body {
  font-size: 300%;
}

The <font style="color:#ff0000">company has been a </font>long way<strike> in the most part</strike> of a good <u>idea tying </u>I was <b>wondering</b> if you 
<font style="font-size: calc(20px * 3)">are not the</font> 
intended <font style="background-color:#00ff00">recipient</font> of the <i>most</i> important <font style="color:#ffbf00">thing</font>

【讨论】：