Как я могу получить размер шрифта по умолчанию в пикселях, используя JavaScript или JQuery?

Question

Как вы знаете, em - это относительное измерение шрифта, где один em равен высоте буквы «M» в размере шрифта по умолчанию. Преимущество в его использовании заключается в том, что вы сможете изменить размер текста.

Но как я могу получить размер шрифта по умолчанию для текущей среды (в пикселях) с помощью JavaScript или JQuery?

С уважением,

Answer 1

Есть несколько ситуаций, которые могут быть полезны-

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

Answer 2

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

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

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

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

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

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

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

Answer 3

Один прием, который я видел / использовал в прошлом, - визуализировать некоторый текст (скажем, 50 произвольных символов или M), а затем измерить размер визуализированного контейнера и выполнить математические расчеты, чтобы определить высоту и ширину один символ Это то, что вы собираетесь? Вы можете сделать рендеринг в фоновом режиме, чтобы пользователь не видел его.

Answer 4

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

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) - число

Answer 5

Использование jQuery (при условии, что вам нужен размер шрифта определенного элемента):

var originalFontSize = $('#your_element_id_here').css('font-size');

Если вы используете Prototype, а также jQuery, вам нужно использовать префикс jQuery вместо знака доллара:

var originalFontSize = jQuery('#your_element_id_here').css('font-size');

Это вернет значение в виде строки примерно так: 16px.

Answer 6

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

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. <ч /> Полностью протестирован и работает для меня (Chrome 22.0.1229.94 м и Firefox 13.01).

Answer 7

Это работает в 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>

Answer 8

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

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