Michael S.: Font mit Outline (Umrandung) versehen?

Beitrag lesen

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