CSS - ¿Es posible agregar un contorno negro alrededor de cada carácter en el texto?


Me gustaría agregar un contorno negro alrededor de cada carácter, por lo que si el id de fuente en el mismo fondo de color que el primer plano todavía es legible.

¿Se puede hacer esto en CSS con o sin css específico del navegador?

 30
Author: Justin808, 2011-01-23

3 answers

Se puede simular con el CSS 2.1 text-shadow propiedad:

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

Esto, por supuesto, no es compatible con IE9 y versiones posteriores. Véase: http://www.jsfiddle.net/yijiang/UCjgg / para una demostración simple.

 49
Author: Yi Jiang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-10 01:21:29

Hay una forma explícita-webkit de agregar esquema de texto, que es con -text-stroke. Esta es la implementación experimental de la propuesta de pista de estándares equivalentes (llamada text-outline en los documentos de especificaciones de CSS3).

 2
Author: Michael Mullany,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-24 18:10:57

Antes de comenzar quiero aclarar que La respuesta de Yi Jiang es la correcta para su pregunta tal como es, de todos modos quería sumar un poco.


Si necesita una forma compatible de hacer esto, la única manera que se me ocurre es usar una fuente con esquema por diseño.

Incluso podrías usar la API de fuentes de Google y tener una solución muy compatible.

¡Buena suerte!

 0
Author: Trufa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:08