[英]How can i get default font size in pixels by using JavaScript or JQuery?
如您所知，em 是一種相對字體度量，其中一個 em 等於默認字體大小中字母“M”的高度。 使用它的一個優勢是因為您將能夠調整文本大小。
但是如何使用 JavaScript 或 JQuery 獲得當前環境的默認字體大小（以像素為單位）？
問候，
有幾種情況這可能很有用 -
function getDefaultFontSize(pa){
pa= pa || document.body;
var who= document.createElement('div');
who.style.cssText='display:inline-block; padding:0; line-height:1; position:absolute; visibility:hidden; font-size:1em';
who.appendChild(document.createTextNode('M'));
pa.appendChild(who);
var fs= [who.offsetWidth, who.offsetHeight];
pa.removeChild(who);
return fs;
}
警報（getDefaultFontSize（））
我相信 M 原則是一個神話。 至少http://www.w3.org/TR/CSS21/syndata.html的以下文檔證明基於 M 原理的計算過於復雜且不必要。
'em' 單位等於使用它的元素的 'font-size' 屬性的計算值。 例外是當 'em' 出現在 'font-size' 屬性本身的值中時，在這種情況下，它指的是父元素的字體大小。 它可用於垂直或水平測量。 （這個單位有時在印刷文本中也被稱為四邊形。）
從本文檔中可以看出以下內容是正確的。
在沒有祖先放大的情況下，1em 正好等於像素字體大小。
由於使用 em 和百分比的祖先放大以明確定義的方式工作，因此一個簡單的循環將計算精確的字體大小，假設： 沒有 CSS； 並且某些祖先的字體大小以絕對單位設置。
由於 ems 測量寬度，您始終可以通過創建一個 1000 ems 長的 div 並將其 client-Width 屬性除以 1000 來計算確切的像素字體大小。我似乎記得 ems 被截斷到最近的千分之一，所以您需要 1000 ems避免錯誤地截斷像素結果。
您可能可以創建 M 原則失敗的字體，因為 em 基於 font-size 屬性而不是實際字體。 假設您有一個奇怪的字體，其中 M 是其他字符大小的 1/3，而您的字體大小為 10 像素。 我有點認為字體大小是最大字符高度的保證，因此 M 不會是 10 像素，所有其他字符都是 30 像素。
可以使用這行代碼來完成：
const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
window.getComputedStyle(document.body) - 獲取 body 的所有樣式getPropertyValue('font-size') - 獲取字體大小的字符串值，例如： (16px)match(/\\d+/)[0]) - 僅獲取數字部分，例如： (16) - 字符串Number(...) - 將數字部分轉換為數字，例如： (16) - 數字我過去見過/使用過的一個技巧是渲染一些文本（比如 50 個任意字符，或 Ms），然后測量渲染容器的大小並進行數學計算以確定單個字符的高度和寬度。 這是你要去的嗎？ 您可以在后台進行渲染，這樣用戶就看不到它了。
使用 jQuery（假設您想要特定元素的字體大小）：
var originalFontSize = $('#your_element_id_here').css('font-size') ;
如果您同時使用 Prototype 和 jQuery，您將需要使用 jQuery 前綴而不是美元符號：
var originalFontSize = jQuery('#your_element_id_here').css('font-size');
這會將值作為字符串返回，如下所示：16px。
我認為這就是你要找的：
function getDefaultFontSize () {
// this will return the default* value assigned to the style: fontSize
defsize=(document.body.style.fontSize)
alert('The default font size of your browser is: "' + defsize + '"');
}
*如果正文在代碼中的其他任何地方（可能在某些 css 中）具有不同的 fontSize 聲明，則該函數將返回該值。 例如：
<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>
以上將返回 20px 的 fontSize 值。
盡管獲取默認字體大小似乎是一個好主意——如果要設置頁面布局等，讓用戶處理它可能是一種更安全的做法。
如果他們的字體更大——那是因為他們是盲人，反之亦然。 我建議設置默認值並“推薦”分辨率/大小。 除非你的應用依賴它——讓用戶處理它。
這適用於FF。
<script>
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
function GetSt()
{
var font_size = getStyle("div2","fontSize");
alert ( font_size );
}
</script>
<div id="div1" style="height: 100px;font-size: 20px;">
<div id="div2" style="font-size: 2em;">
test
</div>
</div>
<button onclick="GetSt();">Click</button>
如果您使用rem作為單位，則默認的 'font-size' 需要取自<html> ，而不是來自 body 或其他。
alert(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))
如何使用JavaScript獲取瀏覽器的寬度（以像素為單位）？
[英]How can I get the width of the browser in pixels using JavaScript?
如何編寫腳本以使用Javascript重置默認字體大小？
[英]How do I script for resetting the default font size with Javascript?
我想在javascript中使用window.getComputedStyle（）來獲取font-size，但它不能
[英]I want to get the font-size using window.getComputedStyle() in javascript but it can't
Tinymce：如何在初始化時顯示默認字體系列或字體大小？
[英]Tinymce: How can I display the default font family or the font size on initialize?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.