Console.log google 中的自定义字体 chrome

Question

我一直在制作在浏览器控制台中玩的游戏，我对使用自定义字体的可能性很感兴趣。我正在使用 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 在底部。

提前致谢！ :)

Answer 1

据我所知，您可以使用名为“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");

Answer 2

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

Answer 3

如果您使用 google 字体，您可以做的是：

console.log(`example text`,`@import url('https://fonts.googleapis.com/...'); font-family:'your-font-family','monospace';`)

Console.log google 中的自定义字体 chrome

Console.log custom fonts in google chrome

javascript

css

google-chrome

google-chrome-devtools

console.log