为什么这个简单的 HTML CSS 文字笔画不起作用？

Question

我的最终目标是做出这样的效果：http://codepen.io/yoksel/pen/XJbzrO（页面底部）。但是我连这个简单的文本大纲都做不出来。

<!DOCTYPE html>

<html lang = "en-US">
  <head>
    <title> Test </title>
    <style>
       #title {
          color: blue;
          stroke: red;
          stroke-width: 2px;
       }
    </style>
  </head>

  <body>
    <h1 id="title">This is some text</h1>
  </body>
</html>

该解决方案必须适用于所有主流浏览器。我正在使用 Google Chrome。如果不能这样描边，请不要建议使用阴影。我无法将阴影变成想要的效果。

Answer 1

stroke 属性存在于 CSS 中，但它仅适用于 SVG 元素。有一个 -webkit-text-stroke 属性可以应用于常规文本元素，但它是非标准的，在 Internet Explorer 上不起作用。

要获得您想要的效果，您有 2 个选择：使用非标准属性或将文本包装在 SVG 元素中。

h1 {
  color: blue;
  -webkit-text-stroke: 2px red;
}
text {
  fill: blue;
  stroke: red;
  stroke-width: 2px;
  font-size:2em;
  font-weight: bold;
}

<h1>Nonstandard -webkit-text-stroke</h1>
<svg>
  <text text-anchor="top" y="50%">SVG Element</text>
</svg>

Answer 2

您正在尝试将 svg 属性 "stroke" 应用于 html 标签。那是你的问题。

您可以将文本转换为 svg 对象，然后基本上复制该代码笔的效果，它应该可以正常工作。只要您坚持使用笔画和一些关键帧动画，像这样的 SVG 就非常适合跨浏览器。

唯一需要担心的是，出于搜索引擎优化的原因，您需要将其他内容作为您的 h1 标签。

我不打算创建一个工作示例，因为您已经从代码笔中获得了一个。

Answer 3

看看你是否非常想要中风那么你想做的第一件事就是删除 google 字体，因为它没有这些可用的功能是的，但你可以尝试下载字体并安装它们以查看如果是的话。

为什么这个简单的 HTML CSS 文字笔画不起作用？

Why doesn't this simple HTML CSS text stroke work?

html

css

stroke

outline