Wie kann ich eine Source Sans Pro-Schriftart so komprimieren, dass sich die Zeichen bei einer Größe von 30 Pixeln fast berühren?

Ich habe eine Website, die die Schriftart Adobe Source Sans Pro verwendet.

Auf der Website möchte ich ein Logo mit dieser oder einer ähnlichen Schriftart erstellen, aber ich möchte, dass es fast keinen Abstand zwischen den Zeichen gibt. Gibt es eine Möglichkeit, dies nur mit CSS zu tun, oder müsste ich eine andere Schriftart verwenden?

Wenn ich eine andere Schriftart verwenden muss, kann mir jemand eine Open Source / kostenlose Schriftart vorschlagen, die ich dafür verwenden könnte.

Vielen Dank.

Antworten (2)

Es gibt eine CSS-Eigenschaft, die Sie verwenden könnten: , die auch negative Werteletter-spacing haben kann .

p {
    /* 16 * 0.0625 = 1px */
    letter-spacing: 0.0625em;
}

Die Eigenschaft letter-spacing steuert den Abstand zwischen den einzelnen Buchstaben in einem bestimmten Element oder Textblock. Zu den vom Buchstabenabstand unterstützten Werten gehören schriftrelative Werte (em, rem), elternbezogene Werte (Prozent), absolute Werte (px) und die Eigenschaft normal, die auf den Standardwert der Schriftart zurückgesetzt wird.

Weitere Informationen: CSS-Tricks zum Buchstabenabstand

Wenn Sie dies nur für das Logo tun möchten, können Sie jeden Buchstaben in einer separaten Spanne haben und dann einen negativen Rand auf die Spannen anwenden.

Etwas wie:

span.letters {
   display: inline-block;
   margin-left: -3px;
}

Bezüglich der Schriftwahl könntest du es mit Open Sans versuchen .

Danke. Ich werde das versuchen. Glauben Sie, dass es einen Unterschied zwischen Open Sans und Source Sans Pro gibt? Ich war mir wirklich nicht sicher, was ich verwenden sollte, also entschied ich mich für Letzteres. Aber ist einer größer als der andere oder gibt es andere Unterschiede, die Sie kennen?
Ich habe Ihren Vorschlag ausprobiert, aber es scheint, als gäbe es immer einen Mindestabstand zwischen den Buchstaben, und selbst wenn Sie den Abstand auf 0,0 setzen, ändert sich daran nichts.
Sie können auch negative Werte für den Buchstabenabstand verwenden!

Sie können einen negativen Buchstabenabstand verwenden, um diesen Effekt zu erzielen.

Siehe dieses Beispiel auf codepen .

Wie kann ich eine Source Sans Pro-Schriftart so komprimieren, dass sich die Zeichen bei einer Größe von 30 Pixeln fast berühren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v