Можно ли сделать точечный текст с помощью css?
Я знаю, что очевидным было бы использовать точечный шрифт, но если мне нужно только использовать точечный текст экономно, то пользователь может загрузить весь шрифт, возможно, переусердствовал бы.
Идея, которую я имел, заключалась в том, чтобы наложить текст на псевдоэлемент с фоновым рисунком небольших прозрачных кругов с белым фоном.
Что-то вроде этого:
<div class="dottedText">Some dotted text</div>
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" char имеет 2 столбца с точками.... ну, я бы предпочел только один.
В идеале что-то вроде этого (взято из здесь):
(Я не уверен, но, возможно, радиальный градиент должен быть настроен для этого)
Изменить:
1) Я не возражаю против того, какой шрифт используется, если он встроенный шрифт. (Даже моноширинный шрифт в порядке)
2) Решение не должно работать в каждом браузере. (Так что решение только для webkit будет в порядке)
