Hoe tekst te omlijnen in HTML / CSS

Stel dat ik witte tekens heb en dat ik een zwarte omtrek over elk teken wil (dit is anders dan het hele tekstvak).

Wat is de code om dit overzicht te maken?

EDIT: Jammer, ik vraag niet om een heel document. Alles wat ik wil is de ene regel code en de benodigde parameters om een omtrek voor tekst te maken. Ik voel niet de behoefte om code te posten, want het is eigenlijk maar een eenvoudig verzoek.

Ik heb geprobeerd text-outline: 2px 2px #ff0000;te gebruiken, maar dit wordt niet door alle grote browsers ondersteund.

Omvang:

function createTitleLegend() {
    legendTitle = document.createElement('div');
    legendTitle.id = 'legendT';
    contentTitle = [];
    contentTitle.push('<h3><font size="16">TM</font></h3>');
    contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
    legendTitle.innerHTML = contentTitle.join('');
      legendTitle.index = 1;
}

Ik heb geprobeerd om outline binnen het lettertype te gebruiken, evenals een class en div. Geen werkt. De bruteforce-aanpak lijkt ook niet te werken.

Nog een BEWERKING:

Dit is de belangrijkste regel waar ik de omtrek wil hebben.

contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');

Voordat ik de omtrek toepas, wordt de tekenreeks in één regel geschreven. Nadat ik de omtrek heb toegepast, hebben we 3 verschillende regels tekst.

contentTitle is een legenda in Google Maps waarbij de tekstuitlijning in het midden staat. Die zin die wordt gepusht, gebruikt twee verschillende soorten lettertypen, een voor de woorden en een voor het nummer. In het geval dat ik een tekstschaduw toepas met een div, creëert dat een nieuwe regel. Ik weet dat de normale oplossing om alles in dezelfde lijn te houden het gebruik van float is. Als ik echter zweef, is niets meer gecentreerd.

Misschien zweef ik niet correct, maar ik heb tot nu toe zowel div style=float als class=”float” geprobeerd.


Antwoord 1, autoriteit 100%

from: Overzichtseffect naar tekst

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

Antwoord 2, autoriteit 18%

Probeer CSS3 Textshadow.

.box_textshadow {
     text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

Probeer het zelf op css3please.com.


Antwoord 3, autoriteit 6%

Probeer dit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
	font: Tahoma, Geneva, sans-serif;
	font-size: 64px;
    color: white;
    text-shadow:
    /* Outline */
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000; /* Terminate with a semi-colon */
}
</style></head>
<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>

Antwoord 4, autoriteit 6%

Met HTML5-ondersteuning voor svghoeft u niet te vertrouwen op schaduwhacks.

<svg  width="100%" viewBox="0 0 600 100">
<text x=0 y=20 font-size=12pt fill=white stroke=black stroke-width=0.75>
    This text exposes its vector representation, 
    making it easy to style shape-wise without hacks. 
    HTML5 supports it, so no browser issues. Only downside 
    is that svg has its own quirks and learning curve 
    (c.f. bounding box issue/no typesetting by default)
</text>
</svg>

Antwoord 5, autoriteit 3%

Er zijn enkele webkit-css-eigenschappen die op zijn minst in Chrome/Safari zouden moeten werken:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;

Dat is een 2px brede zwarte tekstomtrek.

Other episodes