Question

我正在尝试增加文本的宽度。我不是想把它变成粗体。我正在尝试将文本内部保持为空。我的想法是用一种颜色填充文本，并且，onhover change颜色。

这是我想要完成的图片：

http://img.ctrlv.in/50eee77779a5b.jpg

问题是我找不到如何使用css增加文本宽度的方法。（我通过javascript找到它，但后来文本假定图像的属性）（因此无法实现onhover效果）（我发现了一个在w3schools教程中使用javascript增加字体宽度的方法

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2）

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

我知道CSS3 / HTML 5中有一个快捷方式可以实现此效果，但无法重新收集/搜索我看到效果的网站。

任何帮助将不胜感激提前致谢

Answer 1

可能不完美但不确定可以增加字母宽度的css选择器，你可以尝试类似的东西：

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

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

Answer 2

据我所见，你实际上想要抚摸文字。只要笔划发生在文本边界之外，字体的宽度就可以保持不变，对吧？那么，CSS Tricks has an article谈论使用webkit-text-stroke和/或text-shadow来抚摸文本。给出了一个例子here。

所以，你最终会得到类似的东西：

/* 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填充颜色，并在onhover上更改颜色

2 个答案: