34

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

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

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

我尝试过使用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" 。

4

6 回答 6

67

来自：轮廓效果到文字

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}
于 2013-06-20T04:39:48.973 回答
12

试试 CSS3 文本阴影。

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

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

于 2012-07-04T07:50:21.817 回答
5

尝试这个：

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

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

玩得开心！

于 2015-06-15T11:56:18.827 回答
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>

于 2018-09-09T18:18:32.380 回答
2

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

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

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

于 2020-07-19T18:35:20.787 回答
0

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

.test {

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

}

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

于 2021-10-02T05:03:36.760 回答