css 文本描边_具有文本描边和阴影CSS轮廓文本-CSDN博客

css 文本描边

“Stroked” text is simply text with an outline applied to it. There are two primary methods of achieving this with CSS: directly, via text-stroke, or (with some limitations) via a specialized use of text-shadow.

“描边”文本就是带有轮廓的文本。使用CSS实现此目的的主要方法有两种：直接通过text-stroke或(通过一定限制)通过专门使用text-shadow 。

text-shadow is, very simply, box-shadow for text: the difference is that text-shadow takes the same sequence of values and applies it to letter forms, rather than entire elements.

text-shadow非常简单地是text-shadow box-shadow ：区别在于text-shadow采用相同的值序列并将其应用于字母形式，而不是整个元素。

The effect of a standard shadow is visually not the same as stroke: it’s not as sharp. For a better result, try layered offset shadows with no blur at all:

标准阴影的效果在视觉上与笔触不同：不是那么清晰。为了获得更好的结果，请尝试使用完全没有模糊的分层偏移阴影：

h1 {
	text-shadow: 1px 1px 0 red, -1px -1px 0 red;
}

While I find two shadows to usually be enough, on some fonts you may need to achieve coverage by using four layered shadows, each offset by 1 pixel in a different direction:

虽然我发现两个阴影通常就足够了，但是在某些字体上，您可能需要使用四个分层阴影来实现覆盖，每个阴影在不同的方向上偏移1个像素：

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

This works, but only for small offset values: much more than 1px and you’ll start to see some gaps, no matter how many shadows you have.

这有效，但仅适用于较小的偏移值：大于1像素，无论您有多少阴影，您都会开始看到一些间隙。

text-shadow is not intended to be a stroke to text: i.e. it is not an explicit outline. That purpose is served by text-stroke, which is currently a proposed property for CSS:

text-shadow并不是笔触文本：即，它不是明确的轮廓。该目的由text-stroke ，目前是CSS的建议属性：

text-stroke: thickness color;

(Note that there is no “style” part to this declaration, i.e. no solid or dashed: text stroke in CSS is always solid. I find myself adding solid on occasion because the declaration is so close to border).

(请注意，此声明没有“样式”部分，即，没有solid或dashed ：CSS中的文本笔划始终为实线。由于声明离border非常近，我发现自己有时会添加solid border )。

As a proposal, text-stroke is (as of this writing) only supported in Webkit-based browsers, using a proprietary vendor prefix:

作为建议，(在撰写本文时)仅在基于Webkit的浏览器中使用专有供应商前缀支持text-stroke ：

h1 {
	-webkit-text-stroke: 1px red;
	text-stroke: 1px red;
}

One important danger is applying stroke to text is setting on letters that are the same color as their background:

一个重要的危险是将笔画应用于文本是在与背景颜色相同的字母上进行设置：

h1 {
	color: white; 
	-webkit-text-stroke: 2px black;
	text-stroke: 2px black;
	background: white;
}

The result is that would see stroked text if you’re using Chrome or Safari, but nothing if you are using other browsers.

结果是，如果您使用的是Chrome或Safari，将看到描边的文本，但如果使用的是其他浏览器，则看不到任何内容。

If you ever want the effect of stroked color x on text with a background of color x, it’s important to set the text to a visible color first for browsers that do not support stroke, and then override it with text-fill-color for browsers that do:

如果你想与颜色x的背景文字描边色X的效果，设置文本可见的颜色首先为不支持中风的浏览器，然后覆盖它是非常重要的text-fill-color为浏览器这样做：

h1 { 
	color: black;
	-webkit-text-fill-color: white; 
	text-fill-color: white; 
	-webkit-text-stroke: 2px black; 
	text-stroke: 2px black; 
	background: white;
}

With this, you would see the text regardless of which browser you wish to use.

这样，无论您要使用哪个浏览器，您都将看到文本。

Right now the nearest duplication of this effect for other browsers is either using SVG text or text-shadow, detailed above.

现在，对于其他浏览器，此效果的最接近重复是使用SVG文本或text-shadow ，如上所示。

Text legibility can suffer when adding stroke. Some suggestions to avoid this:

添加stroke时，文本的可读性会受到影响。一些避免这种情况的建议：

sans-serif fonts will tend to work best with stroke, especially fonts intended for display.
sans-serif字体倾向于笔画效果最好，特别是用于显示的字体。
Legibility is likely to be enhanced if the stroked text is set to uppercase or small-caps.
如果将描边的文本设置为大写或小写，则可读性可能会增强。
Adding a judicious amount of letter-spacing may also help, as will increasing font-size.
明智地增加letter-spacing也可能会有所帮助，增加font-size也会有所帮助。