如何使用html css javascript创建包含文本的字母形状？

Question

我想创建几个看起来像不同英文字母的形状，每个形状都应包含文字。我有一个图像文件显示我想要做什么。我想只用html css javascript做。我不是要求教我一切，但参考不同的方法就足够了。

更多信息：内容将以形状动态填充。

Answer 1

Closest you'll get without a ridiculous answer.

这可以生成许多类型的ASCII艺术。前进。发疯了。

我非常怀疑有人会为您写出整个故事，但您现在可以使用CSS形状来定义图像和文本之间的界限。

虽然，祝你好运。

css-shapes

Answer 2

整蛊，但并非不可能。你可以使用CSS形状，但我不确定它们的浏览器兼容性。您可以使用图像，或手动输入每个字母，但这不是很灵活。

你可以自己映射每个字母，虽然可能需要一段时间......但是一旦你完成了，你就可以完全自定义他们的内容并轻松改变它们。

这里是字母E！

http://jsfiddle.net/6XZkM/1/

var letter_e = [25,25,25,25,25,10,10,10,10,10,25,25,25,25,10,10,10,10,10,25,25,25,25,25];

var div = document.getElementById('content');
letter_e.forEach(function (count) {
    for (i = 0; i < count; i++) {
        div.innerHTML = div.innerHTML + 'e';
    }
    div.innerHTML = div.innerHTML + '</br>';
});

或者个人而言，我的最爱：

http://jsfiddle.net/6XZkM/2/

Writing out giant letters
with javascript is a bad
idea! Writing out giant
letters with javascript i
s a bad idea! Writing out
giant let
ters with
javascript
is a bad
idea! Writ
ing out giant letters wit
h javascript is a bad ide
a! Writing out giant lett
ers with javascript is a
bad idea!
Writing ou
t giant le
tters with
javascrip
t is a bad idea! Writing
out giant letters with ja
vascript is a bad idea! W
riting out giant letters
with javascript is a bad

修改

我感到无聊，所以做了一个基本的版本，可以处理一封信中的空白。这是字母B！

http://jsfiddle.net/6XZkM/3/

基本上对于这个版本，当你映射每个字母时，如果你只是指定一个数字，它会打印出一行上的那么多字母。如果指定一个数组，它将在空格和字母之间交替。

因此，如果您定义了例如[4,20,5,13,4]，则会在一行上打印出4个字母，后跟20个空格，后跟5个字母，后跟13个空格，后跟4个字母。

我可以看到处理它的一个主要缺点就是你必须手动映射你想要使用的每一个字母。它需要很多的时间。

Answer 3

gggggggggggggggggggg
gggggggggggggggggggg
ggggg           gggg
ggggg
ggggg
ggggg
ggggg       ggggggggg
ggggg       ggggggggg
ggggg           gggg
ggggg           gggg
gggggggggggggggggggg
gggggggggggggggggggg

jsfiddle http://jsfiddle.net/guest271314/kd43Y/