Jak mogę uzyskać domyślny rozmiar czcionki w pikselach za pomocą JavaScript lub JQuery?

Question

Jak wiadomo em jest względnym pomiarem czcionki, gdzie jeden em jest równy wysokości litery "M" w domyślnym rozmiarze czcionki. Zaletą korzystania z niego jest to, że będziesz mógł zmienić rozmiar tekstu.

Ale jak mogę uzyskać domyślny rozmiar czcionki bieżącego środowiska (w pikselach) za pomocą JavaScript lub JQuery?

pozdrowienia,

Answer 1

Istnieje kilka sytuacji, może to być 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; 
} 

alert (getDefaultFontSize())

Answer 2

Chociaż wydaje się, że coraz domyślny rozmiar czcionki może być dobrym pomysłem - czy to aby ustawić układ stron i takie, to chyba bezpieczniejsze praktyką pozwól uchwyt użytkownika, .

Jeśli mają większy rozmiar czcionki - to dlatego, że są niewidome i vice versa. Zalecam ustawienie domyślnych ustawień i "zalecenie" rozdzielczości/rozmiaru. Chyba, że ​​Twoja aplikacja jest od niego zależna - pozwól użytkownikowi na obsługę.

Answer 3

Jedna sztuczka, którą widziałem/używałem w przeszłości, to renderowanie tekstu (powiedzmy 50 dowolnych znaków lub Ms), a następnie zmierzenie rozmiaru renderowanego kontenera i wykonanie matematyki w celu obliczenia wysokości i szerokości pojedyncza postać. Czy to właśnie zamierzasz? Renderowanie można wykonać w tle, aby użytkownik go nie widział.

Answer 4

Działa to w trybie 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 5

jQuery (zakładając, że chcesz rozmiaru czcionki konkretnego elementu):

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

Jeśli używasz Prototype, jak jQuery, będziemy chcieli korzystać z prefiksu jQuery zamiast znaku dolara:

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

ta zwróci wartość jako ciąg tak: 16px.

Answer 6

wierzę M-zasada jest mitem. Przynajmniej następująca dokumentacja z http://www.w3.org/TR/CSS21/syndata.html dowodzi, że obliczenia oparte na zasadzie M są zbyt skomplikowane i niepotrzebne.

Jednostka „em” jest równa komputerową wartość „rozmiar czcionki” właściwości elementu, w którym jest on używany. Wyjątkiem od jest sytuacja, gdy "em" występuje w wartości samej własności "rozmiaru czcionki", czyli , w którym to przypadku odnosi się ona do rozmiaru czcionki elementu nadrzędnego w postaci . To może być użyte do pomiaru pionowego lub poziomego . (Jednostka ta jest również czasami nazywany quad-szerokość w typograficznych tekstach.)

Od tej dokumentacji są spełnione następujące warunki.

1. Bez powiększenia elementu nadrzędnego 1em jest dokładnie równe wielkości czcionki pikselowej.

2. Ponieważ powiększenie przodka z ems i procent działa w dobrze określony sposób, prosta pętla obliczy dokładne rozmiary czcionek, zakładając: nie C.S.S; a niektórzy przodkowie mają ustawiony rozmiar czcionki w jednostkach absolutnych.

3. Ponieważ szerokość wymiaru ems można zawsze obliczyć dokładny rozmiar czcionki poprzez utworzenie elementu div o długości 1000 ems i podzielenie jego właściwości client-Width o 1000. Przypominam sobie, że ems są obcięte do najbliższej tysięcznej, więc potrzebujesz 1000 ems, aby uniknąć błędnego obcięcia piksela.

4. Prawdopodobnie można utworzyć czcionkę w przypadku niepowodzenia zasady M, ponieważ em jest oparta na atrybucie rozmiaru czcionki, a nie na faktycznej czcionce. Załóżmy, że masz dziwną czcionkę, gdzie M jest równe 1/3 rozmiaru innych znaków, a rozmiar czcionki to 10 pikseli. Myślę, że rozmiar czcionki jest gwarancją maksymalnej wysokości znaków, więc M nie będzie 10 pikseli, a wszystkie inne znaki 30 pikseli.

Answer 7

myślę, że to jest to, czego szukasz:

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

* Jeśli organizm ma inną wielkość czcionki decleration nigdzie indziej w kodzie (być może w niektórych css) funkcja zwróci tę wartość . Na przykład:

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

Powyższe zwróci czcionkę o wielkości 20 pikseli.

---

W pełni przetestowany i działa dla mnie (chrom 22.0.1229.94 mi firefox 13.01).