Html 字体大小未被覆盖

Question

我需要添加一些样式以按百分比影响整个 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>

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

Answer 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>

Html 字体大小未被覆盖

Html font-size is not overriden

html

css

font-size