Font mit Outline (Umrandung) versehen?

[Michael S.]

Hallo,

ich suche eine Möglichkeit normalen Text auf einer Seite in einem Outline-Font darzustellen (also z.B. Weisse Schrift mit Schwarzer Umrandung). Natürlich möchte ich auch beide Farben noch wählen können^^

Gibts da eine Möglichkeit?

Gruss
Michael

[Jonathan]

Gibts da eine Möglichkeit?

Mit dem CSS, was die die verbreitetsten Browser unterstützen, nein. Das wird erst ab der Unterstützung von text-shadow gehen, was bis jetzt nur Safari, Konqueror und evtl. ähnliche KHTML-basierende Browser können.

Du musst das wohl über Grafiken o.ä. lösen, wenn es dir wichtig ist.

[Mathias Brodala]

Hallo Michael.

ich suche eine Möglichkeit normalen Text auf einer Seite in einem Outline-Font darzustellen (also z.B. Weisse Schrift mit Schwarzer Umrandung). Natürlich möchte ich auch beide Farben noch wählen können^^

Entweder mit einer Grafik oder wie folgt:

<h1>  
  <span id="primary">FooBar</span>  
  <span id="secondary">FooBar</span>  
</h1>

h1 {  
  font-family:sans-serif;  
  position:relative;  
}  
span#primary { /* Text */  
  color:#fff;  
  position:absolute;  
  z-index:2;  
}  
span#secondary { /* Schatten */  
  color:#333:  
  left:0;  
  position:absolute;  
  top:0.1em;  
  z-index:1;  
}

Damit erreichst du vielleicht am ehesten noch was du möchtest. Nachteile hier: es kann nur ein Schatten simuliert werden und der Inhalt muss doppelt vorhanden sein. Doch zumindest funktioniert diese Methode sogar im IE.

So etwas wie eine „text-outline“-Eigenschaft gibt es leider noch nicht.

Einen schönen Montag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo nochmal.

span#secondary { /* Schatten */
  color:#333:
  /* … */
}[/code]

Hinter dem Wert der color-Eigenschaft möchte lieber ein Semikolon seinen Platz finden.

Einen schönen Montag noch.

Gruß, Mathias

[Michael S.]

Hallo Mathias,

Entweder mit einer Grafik

Nun ja, das hatte ich mal ausprobiert, aber da der darzustellende Text dynamisch ist musste ich für jedes Zeichen eine Grafik haben. Das sah zwar beim laden der Seite dann ganz lustig aus, blähte die Seite aber auch nicht schlecht auf, abgesehen davon das natürlich auch keine Suchmaschine den Text lesen kann...

oder wie folgt:

<h1>

<span id="primary">FooBar</span>
  <span id="secondary">FooBar</span>
</h1>

>   
> ~~~css

h1 {  

>   font-family:sans-serif;  
>   position:relative;  
> }  
> span#primary { /* Text */  
>   color:#fff;  
>   position:absolute;  
>   z-index:2;  
> }  
> span#secondary { /* Schatten */  
>   color:#333:  
>   left:0;  
>   position:absolute;  
>   top:0.1em;  
>   z-index:1;  
> }

Damit erreichst du vielleicht am ehesten noch was du möchtest. Nachteile hier: es kann nur ein Schatten simuliert werden und der Inhalt muss doppelt vorhanden sein. Doch zumindest funktioniert diese Methode sogar im IE.

... so etwas ähnliches verwende ich zur Zeit (übereinandergestapelte DIVs), für eine brauchbare outline muss ich den Text jedoch fünf mal ausgeben, das ist nicht allzu schön. Ich habe dabei auch einige Probleme mit der Positionierung, z.B. innerhalb von <td align=center>...</td>. Es funktioniert zwar, generiert aber einen Wahnsinnswust an geschachtelten Elementen (Beispiel: http://www.animeondvd.ch/).

So etwas wie eine „text-outline“-Eigenschaft gibt es leider noch nicht.

Schade eigentlich, ich hatte gehofft es gäbe eine einfachere Möglichkeit. Naja, jetzt weiss ich wenigstens das ich entweder mit dem Code lebe oder das Design ändere :)

Merci
Michael