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

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

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

编辑：

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

2) 该解决方案不需要在每个浏览器中都有效。 （所以只有 webkit 的解决方案就可以了）

Answer 1

说实话，这个答案可能听起来很有趣或很奇怪，但我不确定它是否可能仅使用 CSS （因为你没有标记任何其他语言），即使它会这样做有点过头了，因此使用点字体而不是编写太多的 CSS 行是有意义的。

即使你排除 IE，你也只有一个 .woff 文件，我认为这很正常，因为它会将你的 http 请求增加一个，而且肯定不会像你认为。

可以在here 上找到酷点字体列表。转换ttf，使用Font Squirrel Service。

确保您有权这样做。

---

Demo 使用的字体：Dotline

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

如果您不希望支持糟糕的 IE，那么您需要的唯一文件是 woff，而这只是 23kb

Answer 2

你不能只为这个字体使用 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}

请务必将 webfonts 的路径上传到您的服务器并更新 CSS 中的每个 url('LINKTOFONT')。

font-squirrel 还提供了其他几种点状字体：

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

Answer 3

即使它依赖于 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 不起作用..

如果你想玩一个工作小提琴检查this。

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

Answer 4

这个字体看起来和你想象的差不多

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

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

希望对你有帮助

Answer 5

将 background-size 更改为使用 ems。

例如：

background-size: 0.1em 0.1em;

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

Answer 6

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

1) 将font-family换成新快递

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>

Answer 7

简答：

没有。不可能。

tl;博士;

我正在寻找解决方案

1) 点会随着字体大小的增加而增大，并且

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

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

没有自定义字体就无法做到这一点。

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

1. CSS 中没有text-fill-pattern。甚至在 SVG 中也没有。 CSS 和 SVG 中都有 text-fill-color。但是，它仅限于特定于浏览器的实现和 CSS 中的非标准供应商前缀。然后是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 或放射线）时，它不会与字体线整齐排列。因为空格和比例字体有不同的距离。

请注意上图中用红色标记的两个ts。即使字形相同，但根据与原点的距离，背景图案无法整齐排列。因此，虽然第二个 t 有排列好的点，但第一个 t 没有。可见的图案部分移动，因此空白区域很突出。相同的模式转换在字符中随机发生。

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

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

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

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

我还将尝试提供另一种类似的解决方案。将 SVG 模式与 background-image 相结合并以百分比形式保留 background-size 可能在一定程度上适用于较大尺寸的 monospace 字体。

免责声明：这个 sn-p 仅适用于基于 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>