Gliederungseffekt für Text

Question

Gibt es in CSS Möglichkeiten, Text mit verschiedenen Farben zu konturieren? Ich möchte einige Teile meines Textes hervorheben, um ihn intuitiver zu gestalten - z. B. die Namen, Links usw. Das Ändern der Link-Farben usw. ist heutzutage üblich, also möchte ich etwas Neues.

Answer 1

Es gibt eine experimentelle Webkit-Eigenschaft namens text-stroke in CSS3, ich habe versucht, dies für einige Zeit zu bekommen, um zu arbeiten, aber bisher erfolglos gewesen.

Stattdessen habe ich die bereits unterstützte text-shadow Eigenschaft (unterstützt in Chrome, Firefox, Opera und IE 9, glaube ich).

Verwenden Sie vier Schatten, um einen gestrichenen Text zu simulieren:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

Ich habe eine Demo erstellt für Sie hier

Und ein Beispiel mit Schwebezustand ist hier erhältlich

---

Wie Jason C. in den Kommentaren erwähnt hat, ist die text-shadow Die CSS-Eigenschaft wird jetzt von allen gängigen Browsern unterstützt, mit Ausnahme von Opera Mini. Wo diese Lösung für die Abwärtskompatibilität (nicht wirklich ein Problem in Bezug auf Browser, die Auto-Update) Ich glaube, die text-stroke CSS sollte verwendet werden.

Answer 2

Vorsicht! SVG ist die Rettung.

Dies ist eine vereinfachte Methode:

svg{
  font   : bold 70px Century Gothic, Arial;
  width  : 100%;
  height : 120px;
}

text{
  fill            : none;
  stroke          : black;
  stroke-width    : .5px;
  stroke-linejoin : round;
  animation       : 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:5px }
}

<svg viewBox="0 0 450 50">
  <text y="50">Scalable Title</text>
</svg>

Hier ist eine weitere komplexe Demo .

Nur CSS:

h1 {
  font: 800 40px Arial;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
}

<h1>I am outlined</h1>

Beachten Sie, dass zum Zeitpunkt der Erstellung dieses Dokuments die -webkit-text-stroke Eigenschaft kann nicht überblendet/animiert werden.

Answer 3

Edita: text-stroke ist inzwischen ziemlich ausgereift und in den meisten Browsern implementiert . Sie ist einfacher, schärfer und präziser. Wenn Ihr Browser dies unterstützen kann, sollten Sie jetzt text-stroke zuerst, anstelle von text-shadow .

---

Sie können und sollten dies nur mit dem text-shadow Wirkung ohne Versatz:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Warum? Wenn Sie mehrere Schatteneffekte ausgleichen, werden Sie unschöne, gezackte Ecken bemerken:

Durch die Verwendung von Textschatteneffekten an nur einer Stelle entfallen die Versätze, d. h. Wenn Ihnen das zu dünn ist und Sie stattdessen einen dunkleren Umriss bevorzugen, kein Problem - Sie können denselben Effekt (unter Beibehaltung der gleichen Position und Unschärfe) mehrmals wiederholen. Zum Beispiel so:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Hier sehen Sie ein Beispiel für einen einzigen Effekt (oben) und denselben Effekt 14 Mal wiederholt (unten):

Beachten Sie auch: Da die Linien so dünn werden, ist es eine sehr gute Idee, das Sub-Pixel-Rendering mit
-webkit-font-smoothing: antialiased .

Answer 4

Ich füge nur diese Antwort hinzu. Das "Streichen" des Textes ist nicht dasselbe wie "Gliederung".

Die Gliederung sieht großartig aus. Streicheln sieht schrecklich aus.

Die an anderer Stelle aufgeführte SVG-Lösung hat das gleiche Problem. Wenn Sie eine Skizze müssen Sie den Text zweimal eingeben. Einmal gestrichen und einmal nicht gestrichen.

Streicheln IST NICHT Gliederung

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}

<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: Ich würde gerne wissen, wie man die SVG auf die richtige Größe eines beliebigen Textes bringt. Ich habe das Gefühl, dass es ziemlich kompliziert ist, wenn man das SVG generiert, es mit Javascript abfragt, um die Ausmaße zu erhalten, und dann die Ergebnisse anwendet. Wenn es einen einfacheren nicht-JS-Weg gibt, würde ich das gerne wissen.

Answer 5

Sie könnten versuchen, mehrere blaue Schatten übereinander zu legen, bis die Schatten wie ein Strich aussehen, etwa so:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Hier ist eine Fiedel: http://jsfiddle.net/GGUYY/

Ich erwähne es nur für den Fall, dass jemand daran interessiert ist, obwohl ich es nicht als Lösung bezeichnen würde, da es auf verschiedene Weise versagt:

• es funktioniert nicht im alten IE
• es wird in jedem Browser anders dargestellt
• das Auftragen so vieler Schatten ist sehr schwer zu verarbeiten :S