CSS中的虚线文本是什么？

Question

使用CSS能否制作虚线文本？

我知道显而易见的方法是使用有虚点的字体，但如果我只需要偶尔使用虚点文本，那么让用户下载一个完整的字体可能有些过头了。

我的想法是在文本上覆盖一个伪元素，其背景图案为带有白色背景的小透明圆点。

类似于这样：

<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”字符有两列点... 我更喜欢只有一个。

理想情况下，类似于这样（从这里获取）：

（我不确定，但可能需要调整径向渐变才能实现这一点）

编辑：

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

2）解决方案不需要在每个浏览器中都有效。 （因此，仅适用于webkit的解决方案将是可以的）

- Danield

---

我认为SVG是最好的选择。 - Madara's Ghost

“preferably each letter should only be shown with only one single line of dots” 的意思是最好每个字母只用一条线的点来显示。 - Mr. Alien

【只是一個想法】 - George

@oGeez 我知道显而易见的事情是使用点阵字体 :) - Mr. Alien

第二个例子不能使用“径向渐变”来制作。这些东西就是不这么工作的。请使用预先点好的字体或图像。 - Jongware

Answer 1

坦白说，这个答案可能听起来有点滑稽或奇怪，但我不确定是否仅使用CSS实现是可能的（因为您没有标记其他语言），即使可以，也会过度使用CSS，因此使用带点的字体而非编写太多行CSS是有道理的。

即使您排除IE，您也只需要一个.woff文件，我认为这很正常，因为它将使您的http请求增加一个，而且它肯定不会像您想象的那样过于臃肿。

您可以在这里找到很酷的带点字体列表。使用Font Squirrel Service转换ttf。

请确保您有权限这样做。

---

演示 使用的字体：Dotline

^{（文件托管在我自己的服务器上，启用了CORS，因为演示在Firefox上失败了）}

如果您不打算支持低劣的IE浏览器，您只需要一个woff文件，大小仅为23kb。

- Mr. Alien

---

使用字体确实是最好的选择。这是最简单和直接的方法，可以在浏览器中获得最一致的结果，易于维护，不会引入任何奇怪的错误等等... - ngstschr

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>

尽管由于某些原因，stroke-linecap没有起作用。

如果您想玩一个可工作的fiddle，请查看this。

编辑1（将SVG样式移动到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>

- maioman

---

@maioman - 不过是一样的东西。唯一的区别在于你通过CSS来分配属性。 - Weafs.py

这是关于编程的内容，请将其从英语翻译成中文。仅返回已翻译的文本：这就是所要求的，但您基本上是正确的； - maioman

Answer 3

通过一些小的调整，我们可以接近目标：

1）将font-family更改为Courier New。

2）在div上添加水平和垂直偏移的text-shadow。

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

FIDDLE

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;
}

<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>

- Danield

Answer 4

你为什么不能使用这种字体的网页字体包呢？

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}

请确保将Web字体的路径上传到您的服务器，并在CSS中更新每个url('LINKTOFONT')。

Font Squirrel还提供了几种类似于Dot的字体： http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

- Mark Busnelli Jr

Answer 5

将 background-size 改为使用 em 单位。

例如：

background-size: 0.1em 0.1em;

注意：上述更改会根据字体大小调整您的第一个示例，但不会产生您的第二个示例。如果确实需要完全相同的效果，我建议使用内联SVG而不是纯CSS方法。（或者更明显的方法：更换为点状字体）

- BCDeWitt

Answer 6

简短回答：

不可能。

tl;dr;

我正在寻找一种解决方案，其中

1）随着字体大小的增加，点的大小也会增加，并且

2）最好每个字母只显示一个单行点 - 而不是像现在这样双行。

编辑：当我说一个单行点时 - 我的意思是每个笔画应该由一个点组成。例如：在上面的图片中，请注意'm'字符有2列点....我更喜欢只有一个。

这需要使用自定义字体才能实现。

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

1. CSS 中没有 text-fill-pattern。即使在 SVG 中也没有。CSS 和 SVG 中都有 text-fill-color。但是，它仅限于特定浏览器的实现和非标准供应商前缀。然后有 stroke 样式。它在 CSS 中具有与 fill 相同的限制（作为非标准），并且仅限于 width 和 color。尽管 SVG 添加了 stroke-linecap 和 stroke-dasharray，但就这些了。

2. 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

3. 唯一剩下的方法是使用 background 图案，然后将其 clip 到文本上。这与您在问题中已经尝试过的非常相似。

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

这可以通过以下插图理解：

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

请注意上图中标为红色的两个“t”。尽管字形相同，但根据与起点的距离，背景图案无法整齐对齐。因此，第二个“t”的点对齐，而第一个“t”则没有。可见的图案部分偏移，因此白色空间显著。相同的图案偏移在字符中随机发生。

请注意上图中标为红圈的衬线和“e”的锥度。在中间，字体更厚，可以容纳来自图案的更多点（一些完整的，一些部分的）。在衬线和锥度处，它变窄，图案无法适合。对于曲线，图案中的点无法弯曲，毕竟这是一个网格图案。

我们无法减少或增加图案中的个别点以适应字体。我们也不能移动背景以在所有字符上对齐。当您使用等宽字体时，比例距离问题在某种程度上得到缓解，但曲线仍然存在，图案无法与之对齐。

因此，这种背景技术本质上是有缺陷的。唯一的解决方案是使用自定义字体。

然而，如果近似值对您来说足够好，则您自己的径向背景技术效果很好。除了 Firefox 外，您自己的技术在其他浏览器中都可以工作。

我还将尝试提供另一种类似的解决方案。将 SVG 图案与 background-image 结合，并将 background-size 保持为百分比，可能在较大的等宽字体上起到一定作用。

免责声明：此片段仅适用于基于 WebKit 的浏览器（Chrome / Safari），因为其他浏览器似乎不支持 SVG 作为 background-image，而且 -webkit-background-clip: text; 是基于 WebKit 的。

.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;  }

<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>

- Abhitalks

---

感谢您提供这么详细的答案。我想您是正确的。不过，您可以看一下我的尝试在这里 - 我加入了一个文本阴影。它非常接近。 - Danield

@Danield：是的，就差不多了。模糊有助于扩散背景中的空洞。而且我在我的答案中提到，你的解决方案是可能的最佳跨浏览器解决方案。:)嘿，谢谢你的慷慨奖金！我从未想过会得到这个！干杯！祝新年快乐 :) - Abhitalks

Answer 7

这个字体看起来和你期望的相似。

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

它有4个扩展名（TTF，EOT，WOFF，SVG）字体，在所有浏览器中都得到支持。

希望这能帮到你。

- Naveen Setty