Comment puis-je obtenir la taille de police par défaut en pixels en utilisant JavaScript ou JQuery?

Comme vous le savez em est une police relative la mesure où l'on em est égale à la hauteur de la lettre "M" dans la taille de police par défaut. Un avantage de l'utilisation de cela est parce que vous serez en mesure de redimensionner le texte.

Mais comment puis-je obtenir la taille de police par défaut de l'environnement actuel (en pixels) à l'aide de JavaScript ou JQuery ?

ce qui concerne,

source d'informationauteur Arthur Ronald

Il ya un couple de situations, cela peut être utile-

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

d'alerte(getDefaultFontSize())

4

Un truc que j'ai vu/utilisé dans le passé, c'est de rendre un peu de texte (par exemple, de 50 caractères arbitraires, ou Ms), puis mesurer la taille du rendu récipient et faire le calcul pour déterminer la hauteur et la largeur d'un caractère unique. Est-ce que vous allez? Vous pouvez faire le rendu en arrière-plan de sorte que l'utilisateur ne veut pas le voir.
4

Je crois que le M-principe est un mythe. À tout le moins les documents suivants à partir de http://www.w3.org/TR/CSS21/syndata.html prouve que les calculs fondés sur le M principe sont trop complexes et inutiles.

Le 'em' unité est égale à la calculés
la valeur de la "police-taille" de la propriété de
l'élément sur lequel il est utilisé. L'
exception est lorsque " em " se produit dans le
la valeur de la "police-taille" de la propriété
lui-même, auquel cas il se réfère à la
taille de la police de l'élément parent. Il
peut être utilisé à la verticale ou à l'horizontale
de la mesure. (Cette unité est également
parfois appelé le quad-largeur en
la typographie des textes.)

À partir de cette documentation suivantes sont remplies.
1. Sans ancêtre de grossissement, cadratin (1 em est exactement égale à la pixels taille de la police.
2. Depuis ancêtre du grossissement avec ems et de pour cent fonctionne bien défini les voies d'une simple boucle calculer exact de la taille de la police, en supposant que: n C. S. S; et certains ancêtre a la taille de police définie en unités absolues.
3. Depuis ems mesurer la largeur, vous pouvez toujours calculer la exacte, en pixels, la taille de police par la création d'un div qui est de 1000 ems long et en divisant son client,-la Largeur de la propriété par 1000. Je me souviens ems sont tronqués à la millième le plus proche, de sorte que vous devez 1000 ems pour éviter une erreur de troncature du pixel résultat.
4. Vous pouvez probablement créer une police où le M principe échoue dans la mesure où em est basé sur la taille de police attribut pas sur la police. Supposons que vous avez une drôle de police où M est de 1/3 de la taille des autres personnages et vous avez une taille de police de 10 pixels. Je pense que la taille de police est une garantie maximale de la hauteur de caractère et de sorte que le M ne sera pas de 10 pixels et tous les autres caractères de 30 pixels.
2

À l'aide de jQuery (en supposant que vous souhaitez la taille de la police d'un élément spécifique):

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

Si vous êtes à l'aide de Prototype ainsi que jQuery, vous aurez envie d'utiliser le jQuery préfixe au lieu de le signe dollar:
```
var originalFontSize = jQuery('#your_element_id_here').css('font-size');
```
Ce sera le retour de la valeur comme une chaîne de caractères comme suit: 16px.

Je pense que c'est ce que vous cherchez:

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

*Si le corps a un autre fontSize decleration n'importe où ailleurs dans le code (peut-être un peu de css) cette fonction permet de retourner la valeur. Par exemple:

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

La ci-dessus sera de retour fontSize valeur de 20px.

Entièrement testé et fonctionne pour moi (chrome 22.0.1229.94 m et firefox 13.01).

Cela fonctionne dans les 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

Bien qu'il semble que l'obtention de la taille de police par défaut pourrait être une bonne idée, si c'est pour définir la mise en page de vos pages et il est probablement plus sûr de la pratique que de laisser l'utilisateur gérer.

Si ils ont leur taille de police plus grande, c'est parce qu'ils sont aveugles et vice versa. Je vous recommande le réglage de vos paramètres par défaut et "recommander" une résolution/taille. À moins que votre application dépend -- permettre à l'utilisateur de gérer.
0

Il peut être fait à l'aide de cette ligne de code:
```
const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
```
1. window.getComputedStyle(document.body) - pour obtenir tous les styles pour le corps
2. getPropertyValue('font-size') - pour obtenir une valeur de chaîne de taille de police, par exemple: (16px)
3. match(/\d+/)[0]) - pour obtenir seulement une partie nombre, exemple: (16) - chaîne
4. Number(...) - pour convertir le nombre en nombre, exemple: (16) - nombre

Vous devez vous connecter pour publier un commentaire.