如何在 HTML / CSS 中勾勒文本答案

【问题标题】：How to outline text in HTML / CSS如何在 HTML / CSS 中勾勒文本
【发布时间】：2012-07-04 15:30:54
【问题描述】：

假设我有白色字符，我希望每个字符都有黑色轮廓（这与为整个文本框绘制轮廓不同）。

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

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

我尝试过使用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 是谷歌地图中的一个图例，其中文本对齐位于中心。被推送的那个句子使用两种不同类型的字体，一种用于单词，一种用于数字。如果我使用 div 应用文本阴影，则会创建一个新行。我知道将所有内容保持在同一行的正常解决方案是使用浮点数。但是，如果我浮动，则不再居中。

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

【问题讨论】：

答案在这里：w3schools.com/cssref/css3_pr_text-outline.asp “任何主流浏览器都不支持 text-outline 属性。”
好的，那我有浏览器支持的选项吗？
如果您已将所有相关信息添加到您的问题中，例如指向 bad resource 的链接和一些显示您已付出努力的代码，我不会否决您的问题。
@krikara 让球再次滚动，也许你可以添加一个图像来代表你想要实现的目标？此外，此链接可能有用：stackoverflow.com/questions/4919076/outline-effect-to-text
非常感谢。这似乎是我试图理解的要点。我想问题中的措辞决定了它是否听起来像“给我 teh c0dez”与“研究工作”。无论如何，我一直在尝试的是相对于笔画和轮廓，但我永远不会猜到另一种简单的实现方法是使用阴影。好主意。

标签： html css

【解决方案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;  
}

【讨论】：

【解决方案2】：

试试 CSS3 Textshadow。

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

在 css3please.com 上亲自尝试一下。

【讨论】：

是的，差不多就是这样。我一直在看到轮廓和笔画的答案，但它们似乎从来没有用过。创建文本阴影将起作用，因为它们实际上具有相同的效果。

【解决方案3】：

试试这个：

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

...您可能也想这样做：

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

您可以根据需要制作任意数量的大纲，并且有足够的空间来提出许多创意。

玩得开心！

【讨论】：

【解决方案4】：

有了 HTML5 对svg 的支持，您无需依赖影子黑客。

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

【讨论】：

【解决方案5】：

至少有一些 webkit css 属性应该可以在 Chrome/Safari 上运行：

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

这是一个 2px 宽的黑色文本轮廓。

【讨论】：

【解决方案6】：

您可以在 css 中使用 text-shadow 属性。

.test {

  text-shadow: 0px 0px 0px red; /* red outline */

}

注意： offsetX 和 offsetY 属性设置为零，因此它看起来像一个大纲。任何其他数字都会使轮廓移开，使文本看起来很笨拙。

【讨论】：