如何在css中獲取當前文本大小

Question

我正在編寫一個css，以便我可以將所有字符串增加到3px左右。我不知道我該怎麼做，我認爲是這樣的：

.increaseSize { 
getSize()+3px; 
} 

任何人都可以幫助我嗎？

Answer 1

我會尋求一種不同的，更簡單的方法。

p.myText { 
 
    font-size: 16px; 
 
} 
 

 
.increaseSize { 
 
    font-size: 1.5em 
 
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

這將使任何.increaseSize元件字體大小比其親大50％。

您可以使用calc（），但也許browser compatibility是一個問題。這是一個更安全的解決方案。

這對你有幫助嗎？

Answer 2

您可以使用它類似於下面的示例：

div { 
 
    font-size: 1em; 
 
} 
 
span.increase { 
 
    font-size: calc(100% + 3px); 
 
}

<div> 
 
    Hello <span class="increase">World</span> 
 
</div>

隨着%單元就可以得到元素的實際字體大小。現在您可以使用calc（browser compatibility）將3px添加到當前的font-size。

您不應該自行計算font-size以進行響應式網頁設計。您可以/應該使用像em，rem或%這樣的相對單位來實現響應式font-size。

Answer 3

由於recomended由W3C

設置字體大小的EM 要允許用戶調整文本（在瀏覽器菜單），許多開發人員使用EM而不是像素。

由W3C推薦的em尺寸單位。

1em等於當前字體大小。瀏覽器中的默認文字大小> 16px。所以，1em的默認大小是16px。

大小可以從使用此公式的像素到EM來計算：像素/ 16 = EM

下面是一些例子

h1 { 
font-size: 2.5em; /* 40px/16=2.5em */ 
} 

h2 { 
font-size: 1.875em; /* 30px/16=1.875em */ 
} 

p { 
font-size: 0.875em; /* 14px/16=0.875em */ 
}