Cómo delinear texto en HTML/CSS

Digamos que tengo caracteres blancos y quiero un contorno negro sobre cada carácter (esto es diferente de delinear todo el cuadro de texto).Cómo delinear texto en HTML/CSS

¿Cuál es el código para hacer este esquema?

EDITAR: Bien, no estoy pidiendo un documento completo. Todo lo que quiero es una línea de código y los parámetros necesarios para crear un esquema para el texto. No siento la necesidad de publicar código, ya que es simplemente una simple solicitud.

He intentado usar text-outline: 2px 2px #ff0000; pero esto no es compatible con ningún navegador importante.

Alcance:

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; 
}

He intentado usar contorno dentro de la fuente, así como una clase y div. Ninguna funciona El enfoque de fuerza bruta tampoco parece funcionar.

Sin embargo, otro EDIT:

Ésta es la línea clave donde quiero el contorno.

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>');

Antes de aplicar el contorno, la cuerda está escrita en una línea. Después de aplicar el esquema, tenemos 3 líneas de texto diferentes.

contentTitle es una leyenda en Google Maps donde el texto se alinea en el centro. Esa oración que se está utilizando utiliza dos tipos de fuentes diferentes, una para las palabras y otra para el número. En caso de que aplique una sombra de texto con un div, eso crea una nueva línea. Sé que la solución normal para mantener todo en la misma línea es el uso de flotador. Sin embargo, si floto, ya nada está centrado.

Tal vez no esté flotando correctamente, pero hasta ahora he intentado tanto con div style = float como con class = "float".

Fuente

2012-07-04 krikara

la respuesta está aquí: w3schools.com/cssref/css3_pr_text-outline.asp "La propiedad del esquema de texto no es compatible con ninguno de los principales navegadores". – ice

Bien, ¿hay una opción para mí que sea compatible con los navegadores? – krikara

Si hubiera agregado toda la información relevante a su pregunta, como el enlace a un [mal recurso] (http://w3fools.com) y algún código que muestre que haría algún esfuerzo, no habría votado negativamente. tu pregunta. – zzzzBov

Prueba CSS3 Textshadow.

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

Pruébalo tú mismo en css3please.com.

Fuente

2012-07-04 07:50:21 algi

Sí, esto es más o menos. Sin embargo, seguí viendo respuestas para contornos y trazos, pero nunca parecieron funcionar. La creación de sombras de texto funcionará ya que prácticamente tienen el mismo efecto. – krikara

de:

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

Fuente

2013-06-20 04:39:48 niico

Prueba esto:

<!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>

... y usted también puede ser que desee hacer esto también:

<!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 1 */ 
    -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, 
    /* Outline 2 */ 
    -2px -2px 0 #ff0000, 
    2px -2px 0 #ff0000, 
    -2px 2px 0 #ff0000, 
    2px 2px 0 #ff0000, 
    -3px 0 0 #ff0000, 
    3px 0 0 #ff0000, 
    0 3px 0 #ff0000, 
    0 -3px 0 #ff0000; /* Terminate with a semi-colon */ 
} 
</style></head> 

<body> 
<div class="OutlineText">Hello world!</div> 
</body> 
</html>

Puede hacer tantas Contornos como desee, y hay suficiente alcance para generar muchas ideas creativas.

¡Diviértete!

Fuente

2015-06-15 11:56:18

Respuesta

Cuestiones relacionadas