In Photoshop den Buchstaben-Tracking-Wert in äquivalente Buchstabenabstände konvertieren CSS

Question

Ich baue gerade eine Site von einer PSD. Die meisten Schriften haben eine Briefverfolgung von -25 (: Ich vermute, das ist das Symbol für den Buchstabenabstand?).

Wie würde ich den gleichen Effekt in CSS bekommen? Ich weiß, dass die Eigenschaft letter-spacing: X ist, aber es nimmt keine Prozentsätze und -25px oder Punkte wäre eine riesige Zahl!

Answer 1

können Sie die em Dimension anstelle von px, wodurch der Abstand im Verhältnis zur Größe Schriftgrößen (so 25% des photoshop irgendwo um .25em ist).

Answer 2

Wenn Ihr Problem einfach mit dem Einheitenkonvertierung ist, können Sie em anstelle von px

Obwohl em Dezimalzahlen erlaubt, ist es nicht die Rendering-Genauigkeit nicht ändert. 0.5px oder gleichwertige Genauigkeit wird nicht in Browsern angezeigt - es wird entweder 0 oder 1px. Einfach, weil ein Bildschirm nicht ein halbes Pixel zeigen kann, kann es im besten Fall mit Anti-Aliasing näherungsweise sein.

Bei kleineren Schriftarten würde das Anti-Aliasing wahrscheinlich schlechter aussehen als der Abstand. Eine weitere Option ist das Suchen nach einer Webschriftart, die standardmäßig den gewünschten Abstand aufweist. Auf diese Weise erhalten Sie ähnliche Ergebnisse wie gewünscht, würden aber wahrscheinlich die Schriftart ändern.

Der CSS-Abstand ist einfach nicht so genau wie Photoshop. Ein Grund ist, dass Photoshop auch zum Drucken rendert - bei Bildschirm-/Pixelauflösungen muss man pixelgenau leben. Obwohl es theoretisch mit einem Buchstabenabstand möglich wäre, der beim Zoomen genauer wird, weiß ich keine Implementierung, die auf diese Weise funktionieren würde.

Wenn der richtige Buchstabenabstand für Sie wirklich wichtig ist, könnten Sie versuchen, SIFR zu verwenden, um den Abstand zwischen den Schriftarten genauer zu berechnen als der Browser - sie können möglicherweise wechselndes Anti-Aliasing verwenden. Offensichtlich würde dies nur Sinn machen, wenn die Buchstabenabstände ein großes Problem darstellen.

Answer 3

In solchen Kontexten implizieren typlose Einheiten normalerweise eine typografische Einheit, die ein kleiner Bruchteil der Einheit em ist. Es wird normalerweise nur "Einheit" genannt. Der Wert dieser Einheit hängt von der Schriftart ab und wird als UPM-Wert (Einheiten pro Em) ausgedrückt. Der allgemeine UPM-Wert ist 1.000, aber Microsoft-Schriftarten haben 2.048, und andere Werte treten ebenfalls auf. (Dieses Problem wird im Artikel UPM value of 1000 set in stone? ausführlich beschrieben)

Unter der Annahme eines UPM-Werts von 1.000 würde -25 auf -0.025em abgebildet. Einstellung letter-spacing: -0.025em neigt dazu, einen eher kleinen Effekt zu haben: eine längliche Textzeile wird um ein "i" kürzer. Es ist nicht zu erwarten, dass der Effekt, den Sie mit CSS erzielen, derselbe ist wie in PhotoShop. Die Rendering-Mechanismen von PhotoShop unterscheiden sich von denen von Browsern.

Answer 4

In Photoshop wird Buchstabenabstand als Briefverfolgung bezeichnet und ist der Abstand zwischen den einzelnen Buchstaben. Das Problem besteht darin, dass Photoshop Letter Tracking 1: 1 nicht in Letter Spacing in CSS konvertiert.

Es ist jedoch sehr einfach, die Konvertierung von Photoshop zu CSS zu berechnen.Photoshop hat einen Brief Tracking-Wert von 200 ..

:

Formeln Photoshop Brief Tracking CSS Zeichenabstand

em Formel

X/1000 = Y 

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

Beispiel

Betrachten Sie das folgende Beispiel zu konvertieren

200/1000 = 0.2 

Das Ergebnis ist 0.2em in CSS.

px Formel

Wenn Sie verwenden "px" bevorzugen Werte die Formel

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 

Beispiel

Betrachten Sie das folgende Beispiel: Photoshop hat einen Brief Tracking-Wert von 200 und einer Schriftart -Größenwert von 10.

200 * 10/1000 = 2 

Das Ergebnis ist 2px in CSS.