Convertir lettre-suivi de la valeur définie dans Photoshop équivalent de la lettre de l'espacement dans le CSS

Je suis actuellement en train de construire un site à partir d'un PSD. La plupart des polices d'avoir une lettre de suivi de -25 ( <- AV-> : je suppose que c'est le symbole de l'espacement des lettres?).

Comment puis-je obtenir le même effet en CSS? Je sais que la propriété est letter-spacing: X mais il ne faut pas les pourcentages et -25px ou pts serait un chiffre énorme!

Double Possible de Comment calculer les CSS lettre de l'espacement de c. s. de "suivi" dans la typographie?

OriginalL'auteur Rick Donohoe | 2012-11-22

  1. 10

    Vous pouvez utiliser le em dimension au lieu de px, ainsi dimensionnement de l'espacement par rapport à la taille de la police (donc de photoshop 25% est quelque part autour de .25em).

    Ceci est incorrect. 25% = 0.025 em.

    OriginalL'auteur onon15

  2. 21

    Dans Photoshop letter-spacing est appelée lettre de suivi et est spécifiquement de l'espace entre chaque lettre du texte. Le problème est que Photoshop Lettre de Suivi n'est pas la conversion de 1:1 à l'Espacement des lettres en CSS.

    Il est très facile de calculer la conversion à partir de Photoshop, CSS.

    Formules pour convertir Photoshop Lettre de Suivi pour les CSS Lettre de l'espacement de

    em Formule

        X / 1000 = Y

X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS

    Exemple

    Considérons l'exemple suivant: Photoshop a une lettre de suivi de la valeur de 200..

    200 / 1000 = 0.2

    Le résultat est 0.2 em en CSS.

    px Formule

    Si vous préférez utiliser le "px" les valeurs de la formule est

        X * S / 1000 = P

X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS

    Exemple

    Considérons l'exemple suivant: Photoshop a une lettre de suivi de la valeur de 200 et une taille de police de la valeur de 10.

    200 * 10 / 1000 = 2

    Le résultat est 2px en CSS.

    OriginalL'auteur davidcondrey

  3. 7

    Dans des contextes comme cela, sans unité numéros requièrent généralement une unité typographique qui est une petite fraction de la em unité. Il est généralement appelé juste “l'unité”. La valeur de cette unité dépend de la police, et il est exprimé en tant que UPM (unités par em). La commune UPM valeur est de 1 000, mais les polices de Microsoft ont 2,048, et d'autres valeurs se produisent trop. (Ce problème est décrit en détail dans l'article UPM valeur de 1000 gravé dans la pierre?)

    Dans l'hypothèse d'un UPM valeur de 1 000, -25 serait carte à -0.025 em. Réglage letter-spacing: -0.025em a tendance à avoir un petit effet: un assez long texte en ligne devient sujet d'un “je” plus court. L'effet que vous obtenez en utilisant le CSS ne devraient pas être la même que dans PhotoShop, le rendu des mécanismes de PhotoShop diffèrent de celles des navigateurs.

    La version originale de cette réponse est correcte: "dans l'hypothèse d'un UPM valeur de 1 000, -25 serait carte à -0.025 em."
    la droite. Je ne sais pas pourquoi j'ai changé le nombre lors de l'ajout de la em unité.

    OriginalL'auteur Jukka K. Korpela

  4. 2

    Si votre problème est tout simplement avec l'unité de conversion, vous pouvez utiliser em au lieu de px

    Bien que em permet des nombres décimaux, on ne change pas la précision. 0.5px ou équivalent précision n'est pas indiqué sur les navigateurs - il va devenir 0 ou 1px. Tout simplement parce que l'écran ne peut pas afficher un demi-pixel, au mieux, il peut approximatif qu'avec l'anti-aliasing.

    Pour les petites polices de l'anti-aliasing serait probablement pire que l'espacement. Une autre option est de trouver un web-police de caractères dont l'espacement souhaité par défaut. De cette façon, vous obtiendrez des résultats similaires à ce que vous voulez, mais signifierait probablement la modification de la police.

    Le CSS espacement n'est tout simplement pas aussi précis que photoshop. Une des raisons est que photoshop rend pour l'impression aussi - avec écran/pixel résolutions que vous avez à vivre avec pixel près. Bien que, théoriquement, il serait possible grâce à l'espacement des lettres qui devient de plus en plus précises sur le zoom, etc je ne sais pas du tout de mise en œuvre qui serait réellement travailler de cette façon.

    Si bonne lettre de l'espacement qui est vraiment important pour vous, vous pouvez essayer d'utiliser SIFR pour rendre les polices à espacement avec plus de précision que ce que le navigateur est capable d' - ils pourraient être en mesure d'utiliser de changer d'anti-aliasing. Évidemment, cela n'a de sens que si la lettre de l'espacement est un gros problème.

    OriginalL'auteur Marcus