谷歌瀏覽器中的 Console.log 自定義 fonts

Question

我一直在制作在瀏覽器控制台中玩的游戲，我對使用自定義 fonts 的可能性感興趣。 我正在使用 chrome，並不真正關心與其他瀏覽器的兼容性。 我知道console.log() 可以使用 CSS 進行樣式設置，但我沒有成功嘗試讓它與自定義 fonts 一起使用。

我的 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”的字體來更改文本的字體。 但是，您不能使用自定義 fonts。

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

如果你使用谷歌 fonts 你可以做的是：

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