html - 如何在 HTML/CSS 中勾勒文本轮廓

Question

假设我有白色字符，我希望每个字符都有黑色轮廓(这不同于勾勒整个文本框)。

制作这个大纲的代码是什么？

编辑:真可惜，我不是要整个文档。我想要的只是一行代码和创建文本大纲所需的参数。我觉得不需要发布代码，因为它实际上只是一个简单的请求。

我试过使用 text-outline: 2px 2px #ff0000; 但任何主流浏览器都不支持。

范围:

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

我试过在字体中使用轮廓，以及类和 div。没有工作。蛮力方法似乎也不起作用。

又一个编辑:

这是我想要大纲的关键行。

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

在我应用轮廓之前，字符串是写在一行中的。应用大纲后，我们有 3 行不同的文本。

contentTitle 是 Google map 中的图例，其中文本对齐位于中心。被推送的那句话使用两种不同类型的字体，一种用于单词，一种用于数字。如果我应用带有 div 的文本阴影，则会创建一个新行。我知道将所有内容保持在同一行的正常解决方案是使用 float。但是，如果我漂浮，则一切都不再居中。

也许我没有正确 float ，但到目前为止我已经尝试了 div style=float 和 class="float"。

Answer 1

来自:Outline effect to text

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