Devrais-je utiliser pt ou px?

Question

Quelle est la différence entre pt et px en CSS? Lequel devrais-je utiliser et pourquoi?

Answer 1

Ici vous avez une très explication détaillée de leurs différences

http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Le jist de celui-ci (de source)

Les Pixels sont de taille fixe unités qui sont utilisées dans l'écran des médias (c'est à dire à la lecture sur l'écran de l'ordinateur). Pixel signifie "élément d'image" et comme vous le savez, un pixel est un peu "carré" sur votre écran. Les Points sont traditionnellement utilisés dans la presse écrite (tout ce qui est imprimé sur du papier, etc.). Un point est égal à 1 / 72ème de pouce. Les Points sont un peu comme les pixels, en ce qu'ils sont de taille fixe des unités et ne peuvent échelle dans la taille.

Answer 2

Jetez un oeil à cet excellent article au CSS-Tricks:

• px – em – % – pt – mot-clé

Tiré de l'article:

---

pt

La dernière unité de mesure qu'il est possible de déclarer la taille de la police est valeurs en points (pt). Point les valeurs sont uniquement pour l'impression CSS! Un point est une unité de mesure utilisée pour de vrai-vie de l'encre sur du papier de la typographie. 72pts = un pouce. Un pouce = une vraie vie de pouce comme une règle. Pas d'un pouce sur un écran, ce qui est totalement arbitraire basée sur la résolution.

Tout comme la façon dont les pixels sont morts précis sur les moniteurs de police de la taille, les tailles sont morts précis sur le papier. Pour le meilleur de la croix-navigateur et multi-plateforme résultats lors de l'impression des pages, mettre en place un impression de la feuille de style et la taille de toutes les polices avec des tailles de point.

Pour faire bonne mesure, la raison pour laquelle nous n'utilisons pas les tailles de point pour affichage à l'écran (autres que ce soit absurde), c'est que la croix-navigateur les résultats sont radicalement différents:

px

Si vous avez besoin d'un contrôle précis, définir la taille des polices dans les valeurs de pixel (px) est un excellent choix (c'est mon préféré). Sur un écran d'ordinateur, il ne peut pas faire plus précis qu'un seul pixel. Avec dimensionnement des polices de caractères en pixels, vous êtes littéralement dire navigateurs pour rendre les lettres exactement ce nombre de pixels en hauteur:

Windows, Mac, alias, anti-aliasing, inter-navigateurs, n'a pas d'importance, un jeu de polices à 14px sera 14px de haut. Mais ce n'est pas à dire il n'y aura pas toujours un peu de variation. Dans un test rapide ci-dessous, les résultats étaient légèrement plus compatible que avec les mots-clés, mais pas identiques:

En raison de la nature de valeurs de pixel, ils ne sont pas en cascade. Si un élément parent a un 18px de la taille de pixel et l'enfant est 16px, l'enfant sera 16px. Cependant, la police la taille les paramètres peuvent être à l'utilisation en combinaison. Par exemple, si le parent a été mis à 16px et de l'enfant a été mis de plus, l'enfant serait en effet de sortir de plus de la mère. Un test rapide m'a montré ceci:

"Plus grands" heurté la 16px de la société mère dans 20px, une augmentation de 25%.

Les Pixels ont obtenu une enveloppe de mal dans le passé pour l'accessibilité et l'utilisabilité des préoccupations. Dans IE 6 et ci-dessous, des polices et des tailles de définir en pixels ne peut pas être redimensionnée par l'utilisateur. Cela signifie que nous hip sains jeunes designers pouvez définir le type de 12px et de le lire à l'écran, mais quand les gens un peu plus long dans la dent aller à la bosse de la taille afin qu'ils puissent le lire, ils sont incapables de. C'est vraiment IE 6 de la faute, pas la nôtre, mais nous gots ce que nous gots et nous avons à traiter avec elle.

Réglage de la taille de police en pixels est la plus précise (et je trouve le plus satisfaisant) méthode, mais ne prendre en considération le nombre de visiteurs qui utilisent encore IE 6 sur votre site et de leurs besoins en matière d'accessibilité. Nous sommes à droite sur le bord de saignement de ne pas avoir à se soucier de cette plus.

---

Answer 3

Un pt est de 1/72th d'un pouce et il est inutile de mesurer pour tout ce qui est rendu sur un appareil qui permet de ne pas calculer le DPI correctement. Cela en fait un choix raisonnable pour l'impression et un terrible choix pour une utilisation sur écran.

Un px est un pixel, qui correspondra à un pixel de l'écran, dans la plupart des cas.

CSS fournit un tas d'autres unités, et celle que vous devez choisir dépend de ce que vous définissez la taille de.

Un pixel est idéal si vous avez besoin de la taille de quelque chose pour correspondre à une image, ou si vous voulez une fine bordure.

Les pourcentages sont grands pour les tailles de police, si vous les utiliser de façon régulière, vous obtenez de tailles de police proportionnelle à la préférence de l'utilisateur.

Ems sont parfaits si vous souhaitez qu'un élément à la bonne taille en fonction de la taille de la police (donc un paragraphe peut obtenir la plus large, si la taille de la police est plus grande)

... et ainsi de suite.

Answer 4

pt est une dérivation (abréviation) de "point" qui, historiquement, a été utilisé dans l'impression des polices de caractères dont la taille a été communément "mesuré" dans les "points" où 1 point est une mesure approximative de 1 / 72ème de pouce, et donc un 72 de police serait de 1 pouce de taille.

px est une abréviation pour "pixel" qui est un simple "point" sur un écran ou une imprimante matricielle ou une autre imprimante ou un périphérique qui rend dans un point de la mode plutôt que de vieilles machines à écrire qui a une taille fixe, solide attaquant qui a laissé une empreinte d'un caractère en appuyant sur un ruban, laissant ainsi une image de taille fixe.

Étroitement lié au point sont les termes "majuscules" et "minuscules" qui, historiquement, a eu à faire avec la sélection de l'fixe des caractères typographiques où le "captital" où les personnages placés dans une case (cas) au-dessus de la non-captitalized personnages qui ont lieu dans un encadré ci-dessous, et donc le "bas".

Il y avait différentes cases (cas) pour les différentes polices typographiques et tailles, mais encore et "supérieur" et "inférieur" cas pour chacun de ceux-ci.

Un autre terme est le "pica", qui est une mesure d'un caractère dans la police, ainsi que pica est de 1/6 de pouce ou 12 unités de mesure (12/72) de mesure.

À proprement parler, la mesure est sur les ordinateurs 4.233 mm ou 0.166 en considérant que l'ancien point (Américain) est 1/72.27 de un pouce et le français est 4.512 mm (0.177). Donc ma déclaration de "se rapprocher" concernant les mesures.

En outre, les machines à écrire comme utilisé dans les bureaux, avaient et "Elite" ou un "Pica" taille de la taille était de 10 et 12 caractères par pouce repectivly.

En outre, le "point", avant de normalisation a été basée sur le métal typographes "pied" de la taille, de la taille de la base de l'empreinte d'un caractère, et varient en taille.

Notez qu'une faute de frappe, "pied" a été à l'origine d'un défunt imprimantes réel pied. Un typographiques pied contient 72 picas ou 864 points.

Comme pour le CSS, je préfère utiliser EM plutôt que de px ou pt, gagnant ainsi de l'avantage de la mise à l'échelle sans perte de position relative et de la taille.

EDIT: Juste pour être complet, que vous pouvez penser de EM (em) comme élément de mesure de la hauteur de la police, ainsi cadratin (1 em pour un 12pt police serait à la hauteur de la police et de la 2em serait deux fois la hauteur. Notez que pour une 12px la police, la 2em est de 24 pixels. DONC 10px est généralement 0.63 em d'une police standard, comme "la plupart" des navigateurs de base sur 16px = cadratin (1 em comme un standard de taille de police.

Answer 5

J'aime px pour un contrôle précis de la mise en page et de l’em lorsqu’on travaille avec des sites qui doivent être fluides ou adaptés à la taille du navigateur. Les pourcentages sont un PITA avec lequel travailler et pt est pour l’impression.