css中的虚线文本？

是否可以使用css制作虚线文本

我知道最明显的是使用虚线字体，但如果我只需要少量使用虚线文本，那么让用户下载整个字体可能太过分了

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

像这样的事情：

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

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

我在寻找一个解决方案

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

2） 最好每个字母只显示一行点，而不是现在的双线

编辑：当我说一行点时，我的意思是每一笔应该只由一个点组成。例如：在上图中，注意“m”字符有两列点……我只希望有一列

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

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

编辑：

1） 我不介意使用哪种字体——只要是内置字体。（即使是单空格字体也可以）

---

2） 该解决方案不必在所有浏览器中都有效。（因此，只使用webkit的解决方案就可以了）

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

即使您排除IE，您也将只有一个

.woff

文件，我认为这是非常正常的，因为它会将您的

http

请求增加一个，而且肯定不会像您认为的那样过于膨胀

冷点字体列表可以在上找到。使用转换

ttf

确保您有这样做的权限

---

使用的字体：

（文件托管在我自己的服务器上，由于在Firefox上演示失败而启用）

---

如果您不想支持蹩脚的IE，那么您需要的唯一文件就是

woff

，而这仅仅是23kb

您就不能将webfont工具包用于这种字体吗

您只需将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还提供了其他几种点状字体：

---

即使它依赖于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>

一些带点的文字

此字体看起来与您期望的相似

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

它有4种扩展[TTF、EOT、WOFF、SVG）字体，在所有浏览器中都受支持

---

希望这将帮助您更改背景大小以使用ems

例如：

background-size: 0.1em 0.1em;

---

注意：以上更改了第一个示例的字体大小，但没有生成第二个示例。如果确实需要效果，我将使用内联SVG而不是纯CSS方法。（或者更明显的方法：更改为虚线字体）

只需稍作调整，我们就可以非常接近：

1） 将

font-family

更改为新字体

2） 在div上添加带有水平和垂直偏移的

文本阴影

3） 将单位更改为

ems

-（建议使用@BDawg）

div{
字体大小：40px；
字体系列：信使新；
位置：相对位置；
文本阴影：-.03em-.03em 0黑色；
}
.dottedText:之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：径向梯度（圆形，透明50%，透明50%），径向梯度（圆形，透明20%，白色50%）30px 30px；
背景大小：.1em.1em；
}
div+div{
字体大小：60px；
}
div+div+div{
字号：80px；
}
div+div+div+div+div{
字体大小：100px；
}

敏捷的棕色狐狸 敏捷的棕色狐狸 敏捷的棕色狐狸 快速棕色狐狸简短回答： 不可能

太长，读不下去了 我在寻找一个解决方案

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

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

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

如果没有自定义字体，则无法执行此操作

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

CSS中没有

文本填充模式

。甚至在SVG中也没有。CSS和SVG中都有

文本填充颜色

。但是，它仅限于特定于浏览器的实现和CSS中的非标准供应商前缀。然后还有

笔划

样式。它在CSS中具有相同的限制（与

填充

）非标准，并且仅限于

宽度

和

颜色

。虽然SVG添加了

笔划线头

和

笔划dasharray

，但仅此而已

文本大纲

可能会有所帮助。如果它像一个

边框

那样工作，那么我们可以制作一个

文本大纲：Npx点红色；

。并增加

Npx

，以实际上消除

文本填充

。但是，这还有其他问题：（1）规范说，它将作为

阴影

工作，即没有样式。如

文本大纲：2px 2px#f00；

。没有

实线/虚线

样式选项。（2）W3C表示该功能存在风险，并且

background-size: 0.1em 0.1em;