27
Wie reduziere ich die Zeichenbreite von Arial-ähnlichen Schriftarten mit CSS?Machen Sie schmale Zeichen mit CSS
A
Antwort
21
Sie können die Zeichenbreite nicht reduzieren, aber Sie können den Buchstabenabstand verringern.
span {
letter-spacing: 0px;
}
+2
nimmt auch Dezimalbrüche (z. B. 0,2px) und Negative (z. B. -1px, -0,2px), so dass Sie einige ziemlich feinkörnige Kontrolle erhalten können. – Val
+2
oh, und verschiedene Einheiten, so kann es größenunabhängig sein: -1%, -0.01em - praktisch, wenn der Text in der Größe variiert. – Val
+3
@Val, ich weiß nicht, welchen Browser Sie verwenden, aber Dezimalbrüche scheinen drei Jahre später in Chrome 21 nicht zu funktionieren. – JohnK
16
Streching eine Schriftart wird mit der font-stretch property of CSS 3 möglich sein.
+1
, aber nicht mit Webkit-Browsern unterstützt (Google Chrome, Apple Safari, ...) –
+19
@PrimozRome Deshalb habe ich Futur verwendet. – Gumbo
+4
Es wird immer noch nicht unterstützt, 6 Jahre seit der Antwort vergangen. Danke für die Antwort trotzdem. :) –
24
Verwenden Sie schmale Schriftarten in Ihrer Schriftfamiliendeklaration. Diese sind ziemlich üblich.
font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
1
können Sie font-weight: in Ihrem CSS-Code verwenden für diese
+0
FYI - Das funktioniert nur mit einigen Schriftarten –
7
können Sie einfach Ihren Text skalieren. Zum Beispiel:
.my-text {
transform: scaleX(0.5);
}
aber hüte dich vor transform-origin die Ihren Text an anderer Stelle machen kann sich bewegen (zum Beispiel, wenn Sie es mit einem Ursprung in der Mitte maßstäblich).
+0
Ich habe in FireFox 54 'transform 'für den Text in einem' SELECT' Element verwendet. Es skalierte den Text in meinem 'SELECT'-Element korrekt und zeichnete das' SELECT'-Element korrekt, aber es gelang nicht, den Abstand zwischen Objekten anzupassen. Das SELECT-Element nimmt denselben Platz ein, obwohl es horizontal wesentlich kleiner ist. – JBH
Ich denke, dass es in CSS 3 möglich ist, aber nicht CSS 2 –