css中的虚线文字？

Question

是否可以用css制作虚线文字？

我知道显而易见的事情是使用虚线字体,但如果我只需要谨慎使用虚线文本,那么让用户下载整个字体可能会过度使用它.

我的想法是用一个伪元素覆盖文本,背景图案为带有白色背景的小透明圆圈.

有点像这样:

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

小提琴

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'字符有2列点....好吧,我宁愿只有一列.

理想情况下是这样的(取自这里):

(我不确定,但可能需要调整径向渐变来做到这一点)

编辑:

1)我不介意使用哪种字体 - 只要它是内置字体.(即使是等宽字体也可以)

2)解决方案不需要在每个浏览器中工作.(所以只有webkit才能解决方案)

Answer 1

说实话,这个答案可能听起来很有趣或奇怪,但我不确定它是否可能只用CSS (因为你没有标记任何其他语言),即使它,这样做也是一种矫枉过正,因此它使用虚线字体而不是编写太多的CSS行是有意义的.

即使你排除IE,你也只有一个.woff我认为非常正常的文件,因为它会将你的http请求增加一个,而且肯定不会像你想象的那样过度膨胀.

这里可以找到很酷的虚线字体列表.ttf使用Font Squirrel Service转换.

确保您有权这样做.

使用的演示字体: Dotline

^{(文件托管在我自己的服务器上,启用CORS,因为Firefox上的演示失败)}

如果你不打算支持糟糕的IE浏览器,那么只有你需要的文件woff只有23kb

Answer 2

即使它依赖于SVG内联样式,这也是我的意思:

<svg xmlns="http://www.w3.org/2000/svg"
 width="1450px" height="300px" viewBox="0 0 800 300">

   <text x="2" y="155" 
    font-family="'Lucida Grande', sans-serif" 
    font-size="222"
    stroke="red"
    stroke-width="3"
    stroke-linecap="round"
    stroke-dasharray="5,5"
    fill="none">
             Some dotted text
</text>

虽然由于某些原因,冲程线帽不起作用..

如果你想玩一个工作小提琴检查这个.

EDIT-1(将svg-styles转移到CSS)

    svg{ 
        width:1450px;
        height:300;
        viewBox:0 0 1500 300;
      
    }
    text{
      font-family:'Lucida Grande', sans-serif;
      font-size:152px;
      stroke:#000ece;
      stroke-width:3px;
      stroke-linecap:round;
      stroke-dasharray:1,1;
      fill:none;
    
    }

<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">

  <text  x="2" y="155" >
        

    Some dotted text

  </text></div>