CSS 对文本的轮廓效果

Question

提问by Mac

Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive - like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new.

CSS 中是否有任何方法可以为不同颜色的文本提供轮廓？我想突出显示文本的某些部分以使其更直观 - 例如名称、链接等。更改链接颜色等现在很常见，所以我想要一些新的东西。

Answer 1

回答by Kyle

There is an experimental webkit property called text-strokein CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

有一个text-stroke在 CSS3 中调用的实验性 webkit 属性，我一直试图让它工作一段时间，但到目前为止没有成功。

What I have done instead is used the already supported text-shadowproperty (supported in Chrome, Firefox, Opera, and IE 9 I believe).

我所做的是使用已经支持的text-shadow属性（我相信在 Chrome、Firefox、Opera 和 IE 9 中支持）。

Use four shadows to simulate a stroked text:

使用四个阴影来模拟描边文本：

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

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

I have made a demo for you here

我在这里为你做了一个演示

And a hovered example is available here

和悬停的例子可以在这里找到

As Jason C has mentioned in the comments, the text-shadowCSS property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-strokeCSS should be used.

正如 Jason C 在评论中提到的那样text-shadow，除了 Opera Mini 之外，所有主要浏览器现在都支持 CSS 属性。这个解决方案将适用于向后兼容性（对于自动更新的浏览器并不是真正的问题）我相信text-stroke应该使用 CSS。

Answer 2

回答by ancestral

Edit:text-strokeis now fairly mature and implemented in most browsers. It is easier, sharper and more precise. If your browser audience can support it, you should now use text-strokefirst, instead of text-shadow.

编辑：text-stroke现在已经相当成熟并在大多数浏览器中实现。它更容易、更清晰、更精确。如果您的浏览器受众可以支持它，您现在应该text-stroke首先使用，而不是text-shadow.

You can and should do this with just the text-shadoweffect without any offsets:

您可以并且应该仅使用text-shadow没有任何偏移的效果来执行此操作：

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Why? When you offset multiple shadow effects, you'll begin to notice ungainly, jagged corners: Shadow effect offsets result in noticeable jagged corners.

Having text-shadow effects in just one position eliminates the offsets, meaning If you feel that's too thin and would prefer a darker outline instead, no problem — you can repeat the same effect (keeping the same position and blur), several times. Like so:

为什么？当您抵消多个阴影效果时，您会开始注意到不美观的锯齿角： Shadow effect offsets result in noticeable jagged corners.

仅在一个位置使用文本阴影效果会消除偏移，这意味着如果您觉得它太薄并且更喜欢较暗的轮廓，没问题 - 您可以重复相同的效果（保持相同的位置和模糊），多次。像这样：

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

Here's a sample of just one effect (top), and the same effect repeated 14 times (bottom):

这是仅一种效果的示例（顶部），并且相同的效果重复了 14 次（底部）：

Sample text rendered with text-shadow

Also note: Because the lines become so thin, it's a very good idea to turn off sub-pixel rendering using
-webkit-font-smoothing: antialiased.

另请注意：由于线条变得如此细，因此最好使用
-webkit-font-smoothing: antialiased.

Answer 3

回答by vsync

Easy! SVG to the rescue.

简单！SVG 来救援。

This is a simplified method:

这是一个简化的方法：

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}

<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

Here's a more complex demo.

这是一个更复杂的演示。

Answer 4

回答by brohr

You could try stacking multiple blured shadows until the shadows look like a stroke, like so:

您可以尝试堆叠多个模糊阴影，直到阴影看起来像笔划，如下所示：

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Here's a fiddle: http://jsfiddle.net/GGUYY/

这是一个小提琴：http: //jsfiddle.net/GGUYY/

I mention it just in case someone's interested, although I wouldn't call it a solution because it fails in various ways:

我提到它以防万一有人感兴趣，尽管我不会称其为解决方案，因为它以各种方式失败：

it doesn't work in old IE
it renders quite differently in every browser
applying so many shadows is very heavy to process :S

它在旧 IE 中不起作用
它在每个浏览器中的呈现方式都大不相同
应用这么多阴影处理起来非常繁重：S

Answer 5

回答by crdunst

I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.

我一直在寻找一种跨浏览器的文本笔画解决方案，它可以在叠加在背景图像上时起作用。我想我有一个解决方案，它不涉及额外的标记、js 并且可以在 IE7-9 中工作（我没有测试过 6），并且不会导致别名问题。

This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.

这是使用 CSS3 text-shadow 的组合，除了 IE ( http://caniuse.com/#search=text-shadow)外都有很好的支持，然后使用 IE 的过滤器组合。目前 CSS3 文本笔画支持很差。

IE Filters

IE过滤器

The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.

发光过滤器（http://www.impressivewebs.com/css3-text-shadow-ie/）看起来很糟糕，所以我没有使用它。

David Hewitt's answerinvolved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.

David Hewitt 的回答涉及在组合方向上添加阴影过滤器。不幸的是，ClearType 被删除了，所以我们最终得到了严重的别名文本。

I then combined some of the elements suggested on useragentmanwith the dropshadow filters.

然后我将useragentman上建议的一些元素与 dropshadow 过滤器结合起来。

Putting it together

把它放在一起

This example would be black text with a white stroke. I'm using conditional html classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

此示例将是带有白色笔划的黑色文本。我正在使用条件 html 类来定位 IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 6

回答by gman

Just adding this answer. "Stroking" the text is not the same as "Outlining"

只需添加此答案。“抚摸”文字与“大纲”不一样

Outlining looks great. Stroking looks horrid.

大纲看起来很棒。抚摸看起来很可怕。

The SVG solution listed elsewhere has the same issue. Of you want an outlineyou need to put the text twice. Once stroked and again not stroked.

其他地方列出的 SVG 解决方案也有同样的问题。如果你想要一个大纲，你需要把文本放两次。一次抚摸，再一次不抚摸。

Stroking IS NOTOutlining

抚摸不是轮廓

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

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

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}

<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

PS: I'd love to know how to make the SVG be the correct size of any arbitrary text. I have a feeling it's fairly complicated involving generating the svg, querying it with javascript to get the extents then applying the results. If there is an easier non-js way I'd love to know.

PS：我很想知道如何使 SVG 成为任何任意文本的正确大小。我有一种感觉，涉及生成 svg，使用 javascript 查询它以获取范围然后应用结果相当复杂。如果有更简单的非 js 方式，我很想知道。

Answer 7

回答by Aashish

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

<h1>Properly stroked!</h1>

Answer 8

回答by surajck

I got better results with 6 different shadows:

我用 6 种不同的阴影得到了更好的结果：

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

Answer 9

回答by Ryall

This mixin for SASS will give smooth results, using 8-axis:

这个用于 SASS 的 mixin 将使用 8 轴给出平滑的结果：

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

And normal CSS:

和普通的CSS：

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

Answer 10

回答by evo_rob

Working with thicker strokes gets a bit messy, if you have the pleasure of sass try this mixin, not perfect and depending on stroke weight it generates a fair amount of css.

使用较粗的笔画会有点混乱，如果您喜欢 sass 尝试这个 mixin，并不完美，并且根据笔画重量它会生成相当数量的 css。

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

CSS 对文本的轮廓效果

提问by Mac

回答by Kyle

回答by ancestral

回答by vsync

Easy! SVG to the rescue.

简单！SVG 来救援。

回答by brohr

回答by crdunst

回答by gman

回答by Aashish

回答by surajck

回答by Ryall

回答by evo_rob

相关推荐

最近更新

标签

CSS 对文本的轮廓效果

提问by Mac

回答by Kyle

回答by ancestral

回答by vsync

Easy! SVG to the rescue.

简单！SVG 来救援。

回答by brohr

回答by crdunst

回答by gman

回答by Aashish

回答by surajck

回答by Ryall

回答by evo_rob

相关推荐

CSS 内联显示的向上移动字符

CSS Twitter Bootstrap 按钮的水平和垂直分离

只为 ipad 加载 css 文件

CSS 如何在流体宽度容器的左侧、中间和右侧的同一行中放置三个按钮？

相关推荐

最近更新

标签