Question

是否可以使用css创建虚线文本？

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

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

有些事情是这样的：

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

enter image description here

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'字符有2列点....好吧我只想要一个。

理想情况是这样的（取自here）：

enter image description here

（我不确定，但可能需要调整径向渐变来做到这一点）

修改：

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

2）解决方案无需在每个浏览器中运行。（所以只有webkit才能解决方案）

Answer 1

老实说，这个答案可能听起来很有趣或很奇怪，但我不确定它是否可能只用CSS （因为你没有标记任何其他语言），即使它，它会这样做是一种矫枉过正，因此使用虚线字体而不是编写过多的CSS行是有道理的。

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

可以在here上找到很酷的虚线字体列表。使用Font Squirrel Service转换ttf。

确保您有权这样做。

Demo使用的字体：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>

虽然由于某些原因，中风线帽不起作用..

如果您想玩工作小提琴，请this。

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>

Answer 3

通过一些小的调整我们可以非常接近：

1）将font-family更改为courier new

2）在div

上添加一个水平和垂直偏移的text-shadow

3）将单位更改为ems - （如@BDawg建议的那样）

<强> FIDDLE

＆＃13;

div {
  font-size: 40px;
  font-family: courier new;
  position: relative;
  text-shadow: -.03em -.03em 0 black;
}
.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: .1em .1em;
}
div + div {
  font-size: 60px;
}
div + div + div {
  font-size: 80px;
}
div + div + div + div {
  font-size: 100px;
}

＆＃13;

<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>

＆＃13;

Answer 4

你不能只使用这个字体的webfont Kit吗？

http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

您只需按照您希望的字体类型链接您的CSS：

@font-face {
    font-family: 'bpdotsbold';
    src: url('BPdotsBold-webfont.eot');
    src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('BPdotsBold-webfont.woff') format('woff'),
         url('BPdotsBold-webfont.ttf') format('truetype'),
         url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

然后只需链接您要使用此字体的任何元素：

h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}

请务必上传网页字样＆＃39;服务器的路径并更新CSS中的每个url('LINKTOFONT')。

font-squirrel还提供了其他几种类似Dot的字体：

http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

Answer 5

将background-size更改为使用ems。

例如：

background-size: 0.1em 0.1em;

注意：上面的更改会使用字体调整第一个示例的大小，但不会生成第二个示例。如果确切的效果绝对必须，我会使用内联SVG而不是纯CSS方法。（或者更明显的方法：改为虚线字体）

Answer 6

简答：

没有。不可能。

TL;博士;

我正在寻找解决方案

1）随着字体大小的增加，点数会增加，

2）最好每个字母只能显示一个单独的字母   点线 - 不是现在的双线。

编辑：当我说一行点 - 我的意思是每一笔   应该只由一个点组成。例如：在上图中   注意到＆＃39; m＆＃39; char有两列圆点....我更喜欢   只有一个。

如果没有自定义字体，则无法完成。

其他解决方法存在两个固有问题：

CSS中没有text-fill-pattern。甚至在SVG中也没有。 CSS和SVG都有text-fill-color。但是，它仅限于特定于浏览器的实现和CSS中的非标准供应商前缀。然后是stroke样式。它具有与非标准CSS相同的限制（如fill的限制），并且仅限于width和color。虽然，SVG添加了stroke-linecap和stroke-dasharray，但这就是全部。
text-outline本可以提供帮助。如果它像border一样工作，那么我们就可以做text-outline: Npx dotted red;。并增加Npx以实际消除text-fill。但是，还存在其他问题：（1）规范说，它将作为shadow工作，即没有风格。与text-outline: 2px 2px #f00;中一样。没有solid / dotted / dashed样式选项。（2）W3C表示该功能存在风险，可能会从规范中删除。（3）到目前为止，它还没有被任何浏览器实现。参考：http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline
唯一的方法是使用background模式，然后将其clip添加到文本中。这是你在问题中尝试过的内容。

最后一种方法（背景）的问题是字体不相同。甚至不相似。字形是不同的。上升者和下降者是不同的。即使是相同角色的笔画也不同。

这可以通过这个例子来理解：

enter image description here

如果您注意到上面示例中的字符（Times New Roman字体），而垂直线的宽度几乎相同，则水平线（＆＃34; e＆＃34;中的水平条）更窄。此外，衬线也具有不同的宽度并且朝向末端逐渐变细。当应用具有图案的背景（任何机制，图像或SVG或径向）时，它将不会与字体线整齐排列。因为空格和比例字体有不同的距离。

请注意上图中的两个t标记为红色。即使字形相同，但取决于与原点的距离，背景图案也不能整齐排列。因此，当第二个t排成一行时，第一个t没有。可见图案部分移动，因此白色空间突出。在字符之间随机发生相同的模式转换。

注意衬线的锥度和e的锥度，如上图中的红色圆圈所示。在中间，字体更加丰富，并且从图案中容纳更多的点（一些是完整的，一些是部分的）。在衬线和锥形处，它变得更窄并且图案不适合。对于曲线，图案中的点不能弯曲，它毕竟是网格图案。

我们无法减少或增加图案中的单个点以适应字体。我们无法将背景转换为所有角色的阵容。当您使用mono-space字体时，比例距离问题会在一定程度上得到缓解，但曲线仍然存在且模式无法与之对齐。

因此，background技术本身存在缺陷。唯一的解决方案是使用自定义字体。

但是，如果近似值对您来说足够好，那么您自己的径向背景技术效果很好。至少除了Firefox之外，您自己的技术适用于其他浏览器。

我还将尝试提供一个更类似的解决方案。将SVG模式与background-image结合使用并保持background-size百分比可能会在较大尺寸的monospace字体上有所作为。

免责声明：此代码段仅适用于基于webkit的浏览器（Chrome / Safari），因为其他浏览器似乎不支持SVG background-image以及{{1是，依赖webkit。

<强> 段：

＆＃13;

-webkit-background-clip: text;

＆＃13;

.dotted {
    padding: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
    font-family: sans-serif;
    font-weight: 300;
    font-size: 32px; background-size: 0.9%;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px;  }
div:nth-of-type(3) { font-size: 80px;  }

＆＃13;

Answer 7

此字体与您期望的类似

http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y

它有4种扩展[TTF，EOT，WOFF，SVG]字体，所有浏览器均支持

希望这会对你有所帮助

css中的虚线文字？

CSS

7 个答案:

简答：

TL;博士;