Html 如何使用css使文本变厚并填充颜色，以及在悬停时更改颜色

我正在尝试增加文本的宽度。我没有尝试将其加粗。我正在尝试保持文本的内部为空。我的想法是用颜色填充文本，然后在悬停时更改颜色

以下是我正在努力实现的目标：

问题是，我找不到一种使用css增加文本宽度的方法。（我是通过javascript找到的，但是文本假定图像的属性）（因此不可能有悬停效果）（我在这里的一个教程中找到了一种使用javascript增加字体宽度的方法。）

)

我正在寻找一个html解决方案（不是画布）

我知道CSS3/HTML5中有一个快捷方式可以实现这种效果，但我无法回忆/搜索我看到这种效果的站点

任何帮助都将不胜感激

---

提前感谢

可能并不完美，但不确定css选择器是否可以增加字母宽度，您可以尝试以下方法：

a:hover {
    letter-spacing: 0.2em;
    color: #07C;
}

/* CSS from tutorial */
.stroke {
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;

  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */

  color: white;

  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

/* The colour changing bit - added by me */
.stroke:hover {
   color:blue;
}

---

这增加了字母之间的距离，对于悬停事件也使用css而不是jquery，更容易

据我所知，你实际上想在文本上画上一笔。只要笔划在文本边界之外，字体的宽度就可以保持不变，对吗？ 这是关于使用webkit文本笔划和/或文本阴影对文本进行笔划。给出了一个实例

所以，你最终会得到这样的结果：

a:hover {
    letter-spacing: 0.2em;
    color: #07C;
}

/* CSS from tutorial */
.stroke {
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;

  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */

  color: white;

  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

/* The colour changing bit - added by me */
.stroke:hover {
   color:blue;
}

---

您是在寻找画布还是css/html解决方案？（你的链接指向一个画布示例）我正在寻找一个css/html解决方案。我只是想显示链接，因为它显示了如何使文本变厚。