Google Chrome中的Console.log自定义字体

问题描述

我一直在做在浏览器控制台中玩的游戏，并且我对使用自定义字体的可能性很感兴趣。我正在使用chrome，并不太在意与其他浏览器的兼容性。我知道console.log() can be styled with CSS，但是尝试使其与自定义字体一起使用并没有取得任何成功。

我的CSS看起来像这样：

@font-face {
  font-family: MyFont;
  src: url(MyFont.woff);
}

我的Js看起来像这样：

console.log("%cThis text shoud be styled!","font-family: MyFont;");

我都尝试过使用''：

console.log("%cThis text shoud be styled!","font-family: 'MyFont';");

两者的标签都在同一个html文件中（没有外部CSS或js文件），顶部css和底部js。

提前谢谢！ ：）

解决方法

据我所知，您可以使用一种名为“ system-ui”的字体来更改文本的字体。但是，您不能使用自定义字体。

console.log("%cThis text should be styled!","font-family: system-ui");

// This might interest you as well
console.log("%cThis text should be styled!","font-variant: small-caps");

,

console.log("%cThis is a custom font style","color: red; font-family:monospace; font-size: 20px");