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

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?

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.

À 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

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.