如何重置在 html 標簽中設置的字體大小屬性

Question

假設我有一個以下代碼 -小提琴- 為<html>標簽設置了font-size屬性。 此樣式以及頁眉和頁腳是通過無法刪除的js 腳本生成的。 這已經存在很長時間了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="bootstrap4.css">
    <link rel="stylesheet" href="myCustomCss.css">
    <link rel="stylesheet" href="cssLoadedByJs.css">
  </head>
  <body>

    <div>
      Header (need to stay as it is now with smaller font)
    </div>

    <div class="content"> <!--  (need to reset it 100%, so content will be sized as I want...) -->
      Content
      <h2>
        H1 here
      </h2>
    </div>

    <div>
      Footer (need to stay as it is now with smaller font)
    </div>

  </body>
</html>

遠程js注入的css文件（cssLoadedByJs.css）——無法刪除，需要保留：

html {font-size: 62.5% !important;}

myCustomCss.css - 我想做什么：

html .content {
    /* font-size: 100% !important; */
    /* font-size: unset; */
    /* font-size: 16px; */
}

如何僅為內容 div 重置font-size屬性並按原樣保留頁眉和頁腳？

我試過設置font-size: unset; 或font-size: 100%用於內容 div 但沒有結果。 font-size: 16px讓我可以根據需要以 16px 呈現文本，但是 h2 仍然只有 20px 插入 32px（由於 html 標簽的這種大小，引導程序使用 2rem 表示 h2）。 無論如何，我相信有比硬編碼像素大小更好的方法。 有可能以某種方式做到這一點嗎？ 請檢查小提琴以獲得更好的理解和測試......

Answer 1

關於什么：

.content, .content * {
    font-size: initial;
}

Answer 2

我不確定你為什么直接在 html 標簽上使用字體大小，但也許下面的 hack 可以幫助解決你的問題。

html > body > div.content, 
html > body > div.content * {
    font-size: 137.5%;
}

我鄭重建議不要使用這種方法，而是不要使用特定元素的樣式。

Answer 3

檢查這個： https : //jsfiddle.net/5jdrta16/1/

我從<html>取出font-size... important設置並將其應用到<body>元素（沒有important ）。 我還將所有樣式都移到了 CSS 中。

.content {
  font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}

body {
  font-size: 62.5%;
}

如何重置在 html 標簽中設置的字體大小屬性

問題描述

3 個解決方案

解決方案1
0 2020-11-17 13:45:10

解決方案2
0 2020-11-17 13:47:01

解決方案3
0 2020-11-17 13:47:05

如何重置在 html 標簽中設置的字體大小屬性

問題描述

3 個解決方案

解決方案1 0 2020-11-17 13:45:10

解決方案2 0 2020-11-17 13:47:01

解決方案3 0 2020-11-17 13:47:05

解決方案1
0 2020-11-17 13:45:10

解決方案2
0 2020-11-17 13:47:01

解決方案3
0 2020-11-17 13:47:05