在控制台console打印字符画及酷炫的文字

原创
前端路迹
2022-8-15 08:00
编辑于 2022-8-15 09:35

知乎网站控制台会打印一个招聘信息。

如何打印上面的一个字符画。

先找一个字符画生成的网站。比如 http://patorjk.com/software/taag

然后复制生成的字符,使用 console.log 打印复制的内容。注意将 \ 做下转义。

为了保证打印效果,建议使用等宽字符。而console.log 是支持以CSS的方式设置打印的内容样式,方法是在打印内容前增加 %c 占位符。可以使用多个 %c及多个样式。

console.log('%c打印内容','CSS style')
console.log('%c打印内容1 %c打印内容2','CSS style 1','CSS style 2')

多个 %c 的效果如下。

控制台支持的CSS是有限的,常用的文字颜色、背景颜色、内间距、文本阴影等都是支持的,高度、宽度、背景图片等是不支持的。

可以利用不断叠加的文本阴影打印一些酷炫的文字。比如

甚至可以这样。

转载请注明出处。本文地址: https://www.qinshenxue.com/article/print-characters-and-draw-interesting-text-in-the-console.html
关注 & 咨询问题