lit-element - 如何在 LitElement 中加载谷歌字体

Question

我正在使用 LitElement，并且正在尝试在元素级别加载 google-font。

我尝试在connectedCallback事件中以 HTML 文字返回它，但它不起作用。我无法在get styles()方法中做到这一点。

语句应该<link...>放在代码的什么位置？

Answer 1

您可以通过向<link>模板添加元素来导入外部样式表，有关详细信息，请参阅导入外部样式表。

这是StackBlitz上的演示。

Answer 2

您可以轻松地在 index.html 中导入 google 字体：

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">

或者您可以创建一个通用 style.js 文件并包含它：

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<style>
 @import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
 html,
 body {
  font-family: 'Roboto', Arial, sans-serif;
  height: 100%;
  margin: 0;
 }
 ...


</style>`;

document.head.appendChild($_documentContainer.content);
var importDoc = window.document;
var style = importDoc.querySelector('style');
document.head.appendChild(style);

或者：

class MyElement extends LitElement {
  render() {
    return html`
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
    `;
  }
}

演示 （看到我导入的红色标签Kaushan+Script）