Comment calculer la taille de la police en comptant les pixels?


8

J'ai une image d'un site Web proposé.

Comment déterminer la valeur de la taille de police px à laquelle définir le texte en comptant les pixels?

Par exemple, j'ai une taille de police: 14px, (en Arial) mais en comptant du haut d'un "L" et en bas de la queue d'un "p", je compte 10 pixels sur le "L", avec 3 supplémentaires sur la queue de le "p". Ce qui ne me donne évidemment pas 14.

Existe-t-il un moyen de déterminer la taille de la police en comptant les pixels de manière fiable?


Cette question expliquera pourquoi vous ne pouvez pas simplement mesurer la hauteur d'un caractère pour obtenir la taille réelle de la police: graphicdesign.stackexchange.com/questions/4035/…
DA01

merci da01, e100 avait déjà lié à cela dans sa réponse.
NikolaiDante

Réponses:


2

Le problème général est à peu près répondu par Qu'est-ce que la taille de la police se traduit exactement? - c'est-à-dire que la taille ne signifie pas vraiment quelque chose de très spécifique.

Mais étant donné que vous travaillez avec une police spécifique connue, vous devriez en effet être en mesure de traduire un nombre de pixels sur votre maquette à sa taille de pixel nominale - vous auriez besoin de faire un peu d'expérimentation pour déterminer le rapport.

Mais je dirais qu'il est beaucoup plus facile de le faire en comparaison, c'est-à-dire de changer simplement la taille de votre page Web jusqu'à ce qu'elle corresponde à la maquette, en superposant une capture d'écran si nécessaire pour vérifier. Gardez à l'esprit que le rendu des polices de votre navigateur ne correspond probablement pas exactement au rendu Photoshop ou au rendu du navigateur sur une autre plate-forme.


2

À des tailles de texte typiques, la plupart des polices ont de 1 à 4 pixels de «tampon» de haut en bas.

Vous pouvez généralement appliquer directement la taille de pixel que vous avez utilisée lors de la compilation dans votre CSS. IOW, si Photoshop / Illustrator dit 14px sur 130%, votre CSS dirait

font-size:14px
line-height:1.3em

0

Je ne pense pas que compter les pixels soit fiable. La raison étant, lorsque je fais défiler les polices, disons dans Photoshop, elles s'affichent toujours à des tailles aléatoires. Je sais que PS n'est pas le Web, mais cela montre que 14 pixels dans une police peuvent être beaucoup plus grands que pour une autre police.

J'ai réussi à prendre la capture d'écran dans Photoshop et à l'aligner. Bien sûr, vous devez vous assurer que votre capture d'écran est à 100% et que vous avez la même police.

Cependant, le moyen le plus rapide et le plus efficace de voir la taille de police utilisée par une page Web consiste à afficher la source de la page Web. S'il n'est pas mentionné par style="font-size: 14px;"quelque part dans la balise, il se trouve dans la feuille de style (plus que probable). Recherchez le lien en haut du code de page qui se termine par .css et visitez ce lien. Recherchez les déclarations font-sizeet font-family. Cela vous indiquera la police utilisée et la taille des différents éléments de la page Web.


1
Si vous fouillez dans le code, vous devez utiliser l' extension Firebug pour Firefox . Cela vous aidera à isoler HTML et CSS pour l'élément en question et vous permettra de l'ajuster au contenu de votre cœur à des fins d'aperçu.
civil
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.