我知道明显的事情是使用虚线字体，但如果我只需要使用虚线文本节制，那么让用户下载一个完整的字体可能是过度的。

我的想法是覆盖文本与伪元素与背景图案的小透明圆圈与白色背景。

有些事情这样：

<div class="dottedText">Some dotted text</div>

FIDDLE

CSS

.dottedText:after
{
    content: '';
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,transparent 50%,transparent 50%),radial-gradient(circle,transparent 20%,white 50%) 30px 30px;
    background-size:4px 4px;
}

我想我可能接近，但上述解决方案将无法正常工作，如果你改变字体大小。

我在寻找一个解决方案

1)点的尺寸将随着字体大小的增加而增加

2)优选地，每个字母应当仅用一个点的线显示 – 不是现在的双线。

编辑：当我说一个单一的点线 – 我的意思是每个笔划应该只由一个点组成。例如：在上面的图片中注意到’m’char有2列的点….好，我只想一个。

理想的是这样的(从here)：

(我不知道，但可能需要调整径向渐变来做到这一点)

编辑：

1)我不介意使用哪种字体 – 只要它是一个内置的字体。 (即使是等宽字体也行)

2)解决方案不需要在每个浏览器中工作。 (所以webkit唯一的解决方案会很好)