Как я могу получить размер шрифта по умолчанию в пикселях с помощью 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())

Я считаю, что М-принцип — это миф. Как минимум следующая документация с http://www.w3.org/TR/CSS21/syndata.html доказывает, что вычисления, основанные на М-принципе, слишком сложны и не нужны.

Единица em равна вычисленному значению свойства font-size элемента, для которого она используется. Исключение составляет случай, когда «em» встречается в значении самого свойства «font-size», и в этом случае оно относится к размеру шрифта родительского элемента. Его можно использовать для вертикального или горизонтального измерения. (В типографских текстах эту единицу также иногда называют квадратной шириной.)

Из этой документации верно следующее.

1. Без увеличения предка 1em точно равен размеру шрифта в пикселях.

2. Поскольку увеличение предков с помощью ems и процентов работает четко определенным образом, простой цикл будет вычислять точные размеры шрифта, предполагая: отсутствие CSS; и у некоторых предков размер шрифта установлен в абсолютных единицах.

3. Поскольку ems измеряет ширину, вы всегда можете вычислить точный размер шрифта в пикселях, создав div длиной 1000 ems и разделив его свойство client-Width на 1000. Насколько я помню, em усекается до ближайшей тысячной, поэтому вам нужно 1000 ems для избежать ошибочного усечения результата пикселя.

4. Вы, вероятно, можете создать шрифт, в котором М-принцип не работает, поскольку em основан на атрибуте размера шрифта, а не на фактическом шрифте. Предположим, у вас есть странный шрифт, где M составляет 1/3 размера других символов, и у вас есть размер шрифта 10 пикселей. Я думаю, что размер шрифта является гарантией максимальной высоты символа, поэтому M не будет 10 пикселей, а все остальные символы 30 пикселей.

Это можно сделать с помощью этой строки кода:

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])

1. window.getComputedStyle(document.body) - получить все стили для тела
2. getPropertyValue('font-size') — чтобы получить строковое значение размера шрифта, например: (16px)
3. match(/\d+/)[0]) - чтобы получить только числовую часть, например: (16) - строка
4. 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.

Хотя кажется, что получение размера шрифта по умолчанию может быть хорошей идеей - если это нужно для установки макета ваших страниц и т. Д., Вероятно, более безопасной практикой будет просто позволить пользователю справиться с этим.

Если у них размер шрифта больше - это потому что они слепые и наоборот. Я бы рекомендовал установить значения по умолчанию и «рекомендовать» разрешение/размер. Если ваше приложение не зависит от него — пусть пользователь справляется с этим.

Это работает в ФФ.

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

Я думаю, это то, что вы ищете:

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 + '"');
}

* Если тело имеет другое значение шрифта fontSize где-либо еще в коде (возможно, в каком-то css), функция вернет это значение. Например:

<style>body{font-size:20px;}</style>
<script>function getDefaultFontSize () {
defsize=(document.body.style.fontSize)
} </script>

Приведенное выше вернет значение fontSize, равное 20px.

Если вы используете rem как единицу, размер шрифта по умолчанию должен быть взят из <html>, а не из тела или другого.

alert(window.getComputedStyle(document.documentElement).getPropertyValue('font-size'))