如何在LitElement中加载Google字体。

Question

我正在使用LitElement，并尝试在元素级别加载谷歌字体。

我尝试在connectedCallback事件中以HTML文本形式返回它，但它不起作用。我无法在get styles()方法中实现它。

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

- JoceM

---

可能是如何在Polymer LitElement中使用Font Awesome的重复问题。 - Alan Dávalos

Answer 1

你可以通过在模板中添加一个 <link> 元素来导入外部样式表。有关详情，请参见 导入外部样式表。

这里是在 StackBlitz 上的演示。

- Penny Liu

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字体的红色a标签）

- Cappittall

---

谢谢。实际上我正在寻找一种在组件级别而不是索引级别上进行字体惰性加载的解决方案。有些字体可能仅适用于特定的组件。我相信你提供的两个选项都会预先加载字体。 - JoceM

@JoceM，你找到解决方案了吗？我也在寻找一种在组件内部加载字体而不是在索引级别加载的方法... - Marcel Panse