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

StackOverflow https://stackoverflow.com/questions/1442542

Вопрос

Как вы знаете, 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())

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

Это можно сделать, используя эту строку кода:

const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
  1. window.getComputedStyle(document.body) - чтобы получить все стили для тела
  2. getPropertyValue('font-size') - чтобы получить строковое значение размера шрифта, пример: (16 пикселей)
  3. match(/\d+/)[0]) - чтобы получить только числовую часть, пример: (16) - строка
  4. Number(...) - чтобы преобразовать числовую часть в число, пример: (16) - число

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

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

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

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

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

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

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

Приведенное выше действие вернет значение размера шрифта 20 пикселей.

Полностью протестирован и работает у меня (chrome 22.0.1229.94 m и firefox 13.01).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top