Comment est calculée la taille de police?

Question

J'ai js fonction complexe avec une équation dans laquelle je réellement besoin de comprendre combien d'espace en pixels tailles de police prennent.

Je l'ai remarqué que les tailles de certaines polices sont différentes selon la police.

Comment est la taille d'une police calculée? Si son ensemble à 12px, en css, qu'est-ce que le 12px signifie? Est-ce large 12px? Haute? Ou est-ce une mesure de pixel diagonale?

Answer 1

Voir la spec :

  

Les correspond de taille de la police à l'em   carré, un concept utilisé dans la typographie.
  Notez que certains glyphes peuvent saigner   en dehors de leurs places em.

Answer 2

La hauteur est la mesure standard

hauteur de la police est mesurée ou définie par la hauteur d'une ligne, qui est la hauteur totale requise pour afficher la gamme de caractères, y compris celles qui descend en dessous de la ligne, comme j, et des éléments en relief (accents sur capitales, par exemple ) comme Ê.

_{(source: banzaimonkey.net )}

Polices dans l'ordre d'apparition:. Times New Roman, Courier New, Calibri, Consolas

Largeur

Largeur de glyphes varie entre les polices, comme vous pouvez le voir dans l'image ci-dessus. Il y a aussi une distinction importante entre proportionnelle et les polices fixed-width. Pour les polices à largeur fixe, l'espace chaque personnage prend sur la ligne est exactement le même (bien que les personnages eux-mêmes ne peuvent pas être tout à fait la même taille que d'un autre. Pour les polices proportionnelles, l'espace chaque personnage utilise est plus en ligne avec sa forme, par rapport à d'autres caractères, de sorte i , j et l sont varient étroite, tandis que w , m et o sont généralement plus larges.

Polices

Polices elles-mêmes rendent Glyphes de différentes manières (évidemment, puisque les polices semblent différentes), et cela signifie qu'un caractère particulier ne rendra pas nécessairement la même hauteur dans les polices. Il a également signifie qu'il n'y a aucun moyen standard pour déterminer de quelle taille un certain caractère peut-être à une taille donnée, en dehors de rendre la police.

Il est probablement pas évident pour la plupart, mais si vous examinez les conditions de licence pour les polices, vous remarquerez qu'ils sont autorisés comme logiciel font . Essentiellement, chaque police contient un ensemble d'algorithmes qui déterminent la façon dont la police doit être rendue dans un contexte donné (différentes tailles, gras, italique, etc.).

Par conséquent, la meilleure façon de comprendre comment une police sera rendu dans un contexte donné est de rendre et voir.

Questions Dimensionnement

Il y a quelques mises en garde pour les tailles de police lorsque vous avez affaire à des choses sur le web.

Pour le Web

Comme tout bon web designer sait, pas de choses sont égales. Il y a des variables innombrables qui entrent en jeu lors du rendu d'une page qui peut entraîner des différences entre les utilisateurs, tels que le navigateur, les polices par défaut, le zoom, le lissage, laissant entendre, mise à l'échelle du navigateur, mise à l'échelle du système d'exploitation, etc.

A List Apart (avant ils ont sauté le requin) a quelques bons articles sur la standardisation des tailles de police et vous aider à obtenir certains niveau de similitude entre les navigateurs:

• Matters Taille
• relative tailles de police
• texte Redimensionner Détection
• Réglage du type sur le Web à une grille de base

Alors que vous pouvez faire votre diligence raisonnable, vous aurez juste à accepter que le support Web implique un certain niveau de variabilité que vous ne pouvez pas contrôler.

Imprimer par rapport à pixels

Parce que les pixels ne sont généralement pas une échelle naturelle pour les polices (mesures différentes sont utilisées pour l'impression), les algorithmes faisant allusion peuvent rendre les polices hors d'un pixel ou deux, en particulier dans les petites tailles, afin de conserver la forme des caractères.

En fait, l'algorithme faisant allusion est souvent complètement différent de petite taille, et dans le travail professionnel que vous auriez probablement utiliser une police différente entièrement pour des tailles inférieures à 12 points.

pixels sont également par rapport à la taille de l'affichage,donc 12px sera une grandeur physique différente sur ces écrans:

• moniteur 20" à 1680x1050
• moniteur 22" à 1680x1050
• écran de l'iPhone
• Blackberry écran
• etc.

TL; DR

Donc, en résumé, il est compliqué. font-size fait référence à la hauteur nécessaire pour afficher la gamme de caractères, mais dans la nature et Internet laineux, il y a toujours des exceptions.

Answer 3

Ceci est une réponse supplémentaire. J'ai trouvé le tableau de ce site très utile pour obtenir une grande compréhension de l'image.

Answer 4

Par la spécification ( http://www.w3.org/TR/CSS2 /fonts.html )

  

Les correspond de taille de la police à l'em   carré, un concept utilisé dans la typographie.   Notez que certains glyphes peuvent saigner   en dehors de leurs places em.

La taille du carré em explique: http://www.emdpi.com/emsquare.html

Answer 5

Vous devez utiliser si .getClientRects() vous devez savoir combien d'espace une série de texte / prendra pour afficher à l'écran.

L'interaction réelle entre ce que vous définissez et quelle taille vous obtenez est un peu compliqué. du CSS3 met de plus clairement que la spécification CSS2 cité dans d'autres réponses:

  

Cette propriété indique la hauteur souhaitée de glyphes de la police.   Pour les polices évolutives, la taille de la police est un facteur d'échelle appliqué à l'EM   unité de la police.

En gros, vous pouvez contrôler la taille de la « em carré ». Les formes de police sont définies par rapport à cela, mais peut certainement écarter l'extérieur / intérieur de cette zone (parfois de manière significative).

Et c'est juste pour commencer! Même si vous assumez une police qui correspond très étroitement à cette fin de support carré - ce que vous allez juste pour multiplier la longueur de la chaîne par cette taille? À moins qu'il est à espacement fixe et votre texte est ASCII seulement, vous avez beaucoup à vous soucier: différentes largeurs de caractères, crénage et ligatures, le comportement d'emballage, et bien sûr d'autres mises en garde « de longueur de chaîne » encore plus simples comme les onglets, la combinaison de caractères Unicode et les codes de contrôle .