Text Stroke: Stuck In The Middle With You

Es gibt eine nicht standardisierte Methode, um HTML-Text zu stilisieren (SVG hat eine standardisierte Methode). Sie ist nicht besonders neu. Es gibt -webkit- und -moz- Präfixe dafür. Jen Simmons hat kürzlich darüber gepostet, mit einem Beispiel

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

Und sie hat Recht.

Dieses CSS ist weder vollständig ausgereift noch vollständig unterstützt. Aber es ist gut genug, um es heute zu verwenden, insbesondere da es nur eine visuelle Verbesserung bietet. Es ist nicht entscheidend für die Nutzbarkeit einer Website.

Ich würde vielleicht noch hinzufügen, dass man, wenn man beispielsweise einen Rand um weißen Text legen möchte, diesen in @supports einpacken könnte, um ganz sicher zu sein, dass es funktioniert (nur für den Fall, dass ein Browser existiert, der text-fill-color unterstützt, aber nicht text-stroke-color).

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

Siehe den Pen Text-Rand in Aktion von Chris Coyier (@chriscoyier) auf CodePen.

Es ruiniert die meisten Schriftarten

Das ist es, was mich daran stört. Wenn Sie einen Rand über die gestaltete Kante eines Zeichens legen, verlieren Sie die Integrität der Form.

Und das ist das Problem mit text-stroke in CSS: Sie haben keine Wahl. Es ist nur zentriert ausgerichteter Rand. Jede der anderen Optionen wäre wohl nützlicher gewesen. Es ist nicht das größte Problem der Welt. Je größer der Text und je kräftiger die Zeichen, desto einfacher ist es, damit durchzukommen.

Trick "Nach hinten setzen"

Wenn Sie einen nach außen ausgerichteten Rand simulieren möchten, zeigt James Nowland, wie Sie Pseudo-Element-Text hinter den Originaltext setzen und dennoch text-stroke verwenden können.

Siehe den Pen CSS3 Stroke und Gradient Text von James Nowland (@jnowland) auf CodePen.

Update! `paint-order` hilft

Als ich dieses Update schreibe (Februar 2018), sagt mir Tobi Reif, dass Firefox Nightly nun eine CSS-Eigenschaft namens paint-order hat, die die Reihenfolge steuern kann, in der etwas über etwas anderes gemalt wird, Rand oder Füllung (oder "marker", was ich zugegebenermaßen nicht weiß, was es ist).

.stroke-behind {
  -webkit-text-stroke: 5px red;
  paint-order: stroke fill;
} 

Dies hilft uns zwar nicht, tatsächlich äußere Ränder zu setzen, aber es täuscht es ziemlich gut vor. Keine Neuigkeiten über innere Ränder.