浏览器 console.log 的高级样式

Question

的输出console.log可以设置样式，基础知识在 StackOverflow 问题JavaScript 控制台中的颜色中介绍。

基本造型

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

高级造型

高级样式呢？console.log风格可以走多远？

图片呢？使用background-image似乎不起作用。

怎么样display: block？好像设置display: block没有效果。

自定义字体怎么样？font-family似乎工作，但如何使用自定义字体？

对于我的用例，我只需要 Chrome 支持。

编辑

我设法实现了图像。诀窍是使用填充来设置图像的大小。例如：

var style = [
  'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
  'background-size: contain',
  'background-repeat: no-repeat',
  'color: #000',
  'padding: 20px 20px',
  'line-height: 0px'
  ].join(';');
console.log('%c ', style);

编辑 2

Firefox 在控制台样式中阻止外部图像，但支持 dataURI：https ://bugzil.la/1134512 。此外，Firefox 让您只需display: block输入即可，请参阅Firefox 支持的属性列表。

Answer 1

Chrome / Chromium 似乎允许以以下任何前缀开头的 CSS 属性：

• background
• border
• color
• font
• line
• margin
• padding
• text
• -webkit-background
• -webkit-border
• -webkit-font
• -webkit-margin
• -webkit-padding
• -webkit-text

为了完整起见，@myf 已经链接到 Firefox 支持的属性。他们是：

• background 和它的普通等价物。
• border-radius
• border 和它的普通等价物
• box-decoration-break
• box-shadow
• clear 和浮动
• color
• cursor
• display
• font 和它的普通等价物
• line-height
• margin
• outline 和它的普通等价物
• padding
• text-* 文本转换等属性
• white-space
• word-spacing 和断字
• writing-mode