2009-09-18 3 views
7

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

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

С уважением,

ответ

15

Есть несколько ситуаций, это может быть useful-

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

+0

Очень хорошо. Поздравления. Надеюсь, все будет хорошо. UPvote. –

+0

«Ширина» для меня это неверно (это ширина страницы). Изменение его с 'div' на' span' исправляет его. – ThinkingStiff

+0

Имеет ли значение, что мой элемент 'html' имеет размер шрифта 100% (т. Е. Независимо от настроек браузера), и все другие размеры на веб-сайте объявляются в' em'? Вышеприведенный код дает мне размер шрифта в px, правильно? Является ли это свободно взаимозаменяемым? – Jens

0

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

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

4

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

+0

Это звучит неплохо, но я думаю, что есть еще одно хорошее решение. –

+0

На самом деле это почти так, как это делается в наши дни. – Triptych

+0

Ok Glenn, UPvote –

1

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

Мне нужны оба: ie и ff –

+0

+1 для использования getComputedStyle() ['font-size'] вместо создания фиктивного элемента. –

+0

Но -1 для использования 'currentStyle', являющегося запатентованным вариантом для той же функции' getComputedStyle', что вы + 1 сделали его для :) – amn

2

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

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

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

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

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

+0

Как сказано: предполагается, что вы хотите размер шрифта для определенного элемента. Нет нет. Я просто хочу размер шрифта по умолчанию для текущей среды. –

4

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

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

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

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

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

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

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

+0

Хороший ресурс +1 –

2

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

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 decleration нигде в коде (возможно, в какой-то CSS) функция возвращает это значение , Например:

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

Вышеупомянутое вернет значение размера шрифта 20px.


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

+0

Свойство объекта 'style' элемента содержит только те свойства стиля (например,' font-size', например), которые * были установлены на самом элементе *, ** inline **. Это означает, что вы либо присутствуете в атрибуте 'style' * * как часть тега элемента, либо назначаете их как' style.fontSize = ... 'youself, ранее. Если ваши элементы получают свой вычисленный стиль, скажем, связанную таблицу стилей или блок '' 'document, document.body.style' не содержит полезной информации. То, что вам нужно, это функция «Window.getComputedStyle». Он делает именно то, что вам нужно выше. – amn

 Смежные вопросы

  • Нет связанных вопросов^_^