我正在使用 LitElement,并且正在尝试在元素级别加载 google-font。
我尝试在connectedCallback
事件中以 HTML 文字返回它,但它不起作用。我无法在get styles()
方法中做到这一点。
语句应该<link...>
放在代码的什么位置?
我正在使用 LitElement,并且正在尝试在元素级别加载 google-font。
我尝试在connectedCallback
事件中以 HTML 文字返回它,但它不起作用。我无法在get styles()
方法中做到这一点。
语句应该<link...>
放在代码的什么位置?
您可以通过向<link>
模板添加元素来导入外部样式表,有关详细信息,请参阅导入外部样式表。
这是StackBlitz上的演示。
您可以轻松地在 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
)