css中的虚线文本？ [英] Dotted text in css?

问题描述

是否可以用css制作点状文本？

我知道明显的事情是使用虚线字体，但如果我只需要使用点然后让用户下载整个字体可能已经过时了。

我的想法是使用带有背景图案的伪元素来覆盖文本

有些事情是这样的：

 < div class =dottedText>一些点分文字< / div> 
  

找到酷炫字体的列表。使用字体松鼠服务转换 ttf 。

确保您有权限这样做。

---

演示 使用的字体： Dotline

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

如果你不想支持crappy IE，那么你只需要的文件是 woff ，这只是23kb

Is it possible to make dotted text with css?

I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having the user to download a whole font might be overdoing it.

The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background.

Some thing like this:

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

I think I might be close, but the above solution won't work properly if you change the font-size.

I'm looking for a solution where

1) The dots will increase in size as font-size increase, and

2) preferably each letter should only be shown with only one single line of dots - not the double line as it is now.

Edit: When I say one single line of dots - I mean that each stroke should be made up of only one dot. For example: In the above picture notice that the 'm' char has 2 columns of dots....well I would prefer only one.

Ideally something like this (taken from here):

(I'm not sure, but possibly the radial gradient needs to be tweaked to do this)

Edit:

1) I don't mind which font is used - so long as it's a built-in font. (Even a monospace font is ok)

2) The solution need not work in every browser. (So a webkit only solution will be fine)

解决方案

To be honest, this answer may sound funny or weird, but am not sure whether its possible with CSS ONLY (As you haven't tagged any other languages), even if its, it would be an overkill to do so, and hence it makes sense in using a dotted font instead of writing too many lines of CSS.

Even if you rule out IE, you will have only single .woff file which I think is very much normal, as it will increase your http request by one, and surely it won't be over bloated much as you think.

List of cool dotted fonts can be found over here. Convert the ttf,using Font Squirrel Service.

Make sure you have permission to do so.

---

Demo Fonts used : Dotline

^{(Files are hosted on my own server, enabled CORS because the demo failed on Firefox)}

If you are not looking to support crappy IE, only file you will need is woff and that's merely 23kb

这篇关于css中的虚线文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！