DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft font-variant ermöglicht es Ihnen, den ausgewählten Text in Kapitälchen umzuwandeln. Diese Eigenschaft wurde in CSS3 erweitert.
p:first-line {
font-variant: small-caps; /* default is `normal` */
}Vor CSS3 akzeptierte diese Eigenschaft einen von zwei möglichen Werten: normal (wie Text standardmäßig gerendert wird) und small-caps.
Ein Wert von small-caps rendert den Text in Großbuchstaben, die kleiner sind als normale Großbuchstaben. Dies überschreibt nicht die im Inhalt oder Markup festgelegte Großschreibung. Zum Beispiel:
Im obigen Demo sind beide Absätze auf font-variant: small-caps gesetzt. Der erste Absatz hat nur den ersten Buchstaben im Markup großgeschrieben, daher erscheint er wie erwartet (erster Buchstabe groß, Rest in Kapitälchen).
Die zweite Zeile ist im Markup komplett in Großbuchstaben geschrieben, was den Wert small-caps überschreibt und alles in normale Großbuchstaben setzt.
Wenn diese Absätze auf font-variant: small-caps und text-transform: lowercase gesetzt sind, erscheinen sie in allen Kapitälchen. Ähnlich, wenn diese Absätze auf font-variant: small-caps und text-transform: uppercase gesetzt sind, erscheinen sie in allen normalen Großbuchstaben.
font-variant kann als Teil einer font Kurzschreibungsdeklaration enthalten sein.
Neue Ergänzungen in CSS3
In CSS3 wird font-variant zu einer Kurzschreibungsanweisung und kann mehrere Werte akzeptieren, darunter all-small-caps, petite-caps, all-petite-caps, titling-caps und unicase, unter anderem.
Weitere Ressourcen
Browser-Unterstützung
In IE6/7 führt das Setzen von font-variant: small-caps dazu, dass jeder Text, der auf text-transform: uppercase oder text-transform: lowercase gesetzt ist, wie text-transform: none erscheint.
Verwandt
font
font-family
font-size
font-stretch
.element { font-stretch: ultra-condensed; }
font-style
font-synthesis
.intro { font-synthesis: weight style; }
font-variant-numeric
.fraction { font-variant-numeric: diagonal-fractions; }
font-weight
span { font-weight: 800; }
line-height
.element { line-height: 1.35; }
Chris,
Es sei darauf hingewiesen, dass es derzeit einen Webkit-Bug gibt, der verhindert, dass font-variant bei Nicht-Systemschriften ordnungsgemäß funktioniert. Ich bin sicher, dass sie an einer Lösung arbeiten, aber 2 Jahre nach der Veröffentlichung sehen Google Fonts in Chrome immer noch abstoßend aus. ;)
Josh,
Haben Sie einen Link zu einem Bug-Report oder einem Artikel, der dies beschreibt? Ich kann über Google nichts Spezifisches zu font-variant finden und habe bisher nichts von diesem Bug gehört.
Ich helfe Chris bei einigen dieser Almanac-Einträge und werde dies gerne aktualisieren, wenn Sie etwas Spezifisches mit einem Link oder auch nur eine Demo zum Vergleich mit anderen Browsern haben.
Danke!
Louis,
Ich freue mich, dass Sie an diesem Almanac arbeiten. Er ist sehr nützlich! Mir wird jetzt klar, dass ich diesen Bug und einen anderen Bug im Kopf habe und die Streams durcheinandergebracht habe.
Es ist eigentlich in Webkit mit text-rendering: optimizeLegibility…
https://code.google.com/p/chromium/issues/detail?id=51973
Entschuldigung für die Verwirrung. Ich bin mir nicht sicher, ob es wichtig genug ist, es zu erwähnen oder nicht. Hat mir heute ein paar Sorgen bereitet.
Ah, okay, kein Problem. Interessant, denn ich weiß nicht viel über diese Eigenschaft. Und jetzt, wo ich sie überprüfe
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
Es steht
„Die Eigenschaft text-rendering ist eine SVG-Eigenschaft, die in keinem CSS-Standard definiert ist“, aber sie funktioniert trotzdem allgemein in HTML.
einfach **nicht** wahr. Vielleicht ein Microsoft-Mitarbeiter? :)
Josh,
Danke für die Info bzgl. des optimizeLegibility-Bugs in Webkit. Ich konnte nicht verstehen, warum font-variant nicht funktionierte und es hat mich wahnsinnig gemacht.
Die Eigenschaft font-variant ist nicht browserübergreifend. In Webkit sind die Buchstaben kleiner als in anderen Browsern. Gibt es eine Möglichkeit, das zu beheben?
Ich meine natürlich kleine Großbuchstaben.
Nein, wahrscheinlich nicht. Das Beispiel in CodePen sollte Normalize.css verwenden, und wenn es eine Möglichkeit gäbe, das zu beheben, wäre sie sicherlich darin enthalten. Ich denke, es ist nur ein geringfügiger Browserunterschied, mit dem Sie leben müssen.
Chris/Louis, ich habe den Verdacht, dass
font-variantmehr kaputt ist als das. Ich habe nur ein paar schnelle Tests in Chrome gemacht, aberfont-varianterzeugt keine "richtigen" kleinen Großbuchstaben (im Sinne von unterschiedlichen Glyphen), sondern nur kleine Großbuchstaben; was nicht wirklich das ist, worum es bei kleinen Großbuchstaben geht. Ich habe einen kurzen Artikel geschrieben, der das Problem und eine mögliche Lösung hervorhebt. Es ist keineswegs eine rigorose Browserübersicht, aber hoffentlich wirft sie ein wenig Licht darauf.Ich finde es etwas umständlich, dass font-variant: small-caps nicht auf großgeschriebenen Text angewendet wird. Ich möchte meine Originaltexte so aussagekräftig wie möglich halten, daher schreibe ich Akronyme, wenn sie als HTML verwendet werden, gerne groß, aber zeige sie über CSS in kleinen Großbuchstaben an. Aber nach meiner Logik funktioniert das nicht, wie oben erwähnt, es funktioniert nur bei Kleinbuchstaben. Gibt es dafür eine Umgehungsmöglichkeit? Vielleicht einfach eine Klasse auf das Akronym mit einer kleineren Schriftgröße setzen? :-S
Die Umgehungslösung wird im Artikel erwähnt: "text-transform: lowercase". Sie können das Akronym im HTML-Quelltext großschreiben, und wenn das CSS angewendet wird, wird es vor der Umwandlung in kleine Großbuchstaben in Kleinbuchstaben umgewandelt.
Kann dieses Schriftvarianten-Tool in Adobe Photoshop CC verwendet werden, um die Dateigröße eines Logos zu reduzieren, das im Format ".png" oder "gif" gespeichert wird, da Google eine Größenbeschränkung von 30 KB für die Logos in seiner G Suite-App hat?
Frieden!
Vielen Dank für die Informationen!