0

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

这是我要完成的工作的图片：

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

问题是我找不到如何使用 css 增加文本宽度的方法。（我通过 javascript 找到了它，但随后文本假定了图像的属性）（因此不可能产生悬停效果）（我找到了增加在此处的 w3schools 教程中使用 javascript 的字体宽度

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

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

我知道 CSS3/HTML 5 中有一个快捷方式来实现这种效果，但无法回忆/搜索我看到效果的网站。

任何帮助将不胜感激在此先感谢

4

2 回答 2

0

可能并不完美，但不确定可以增加字母宽度的 CSS 选择器，您可以尝试以下操作：

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

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

于 2013-01-10T16:09:50.323 回答
0

据我所见，您实际上想要描边文本。只要笔划发生在文本边界之外，字体的宽度就可以保持不变，对吗？好吧，CSS Tricks 有一篇文章讨论了使用 webkit-text-stroke 和/或 text-shadow 来描边文本。这里给出一个例子。

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

/* 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;
}
于 2013-01-10T16:18:45.610 回答