vue-cli-service build --target wc --name wc-demo 'src/App.vue'
。我在Web组件中加载字体和Material图标时遇到了问题。我在App.vue的样式标签中导入了roboto-font.scss和material-icon.scss,这是创建Web组件的入口。<style lang='scss'>
// @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import "~@/assets/fonts/roboto-font/roboto-font.scss";
@import "~@/assets/fonts/material-icons/material-icons.scss";
</style>
Material-icon.scss
$font-dir: "assets/fonts/material-icons/web-font/";
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
// src: url('https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format("woff2");
src: url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2") format("woff2"),
url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff") format("woff");
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Roboto-font.scss
$font-dir: "assets/fonts/roboto-font/web-font/";
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url("#{$font-dir}KFOkCnqEu92Fr1MmgVxIIzQ.woff") format("woff");
}
当使用
yarn serve
运行项目时,一切都正常。字体在网络选项卡中正确加载,但是在构建 Web 组件并使用“live server”在浏览器中加载它后,字体不会在网络选项卡中加载。
我能够让字体和图标正常工作的唯一方法是将链接标签添加到 index.html 文件中。但不在 Web 组件内(在 Shadow DOM 内)。
<!DOCTYPE html>
<html lang="en">
<head>
<title>wc-demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=“./wc-demo.js"></script>
<wc-demo></wc-demo>
</body>
</html>
我希望能够了解如何在Web组件中包含字体,或者在HTML文件头部使用它是唯一的选择吗?
另外,我已经链接了一些类似的问题,这可能会帮助您帮助像我这样的许多人:
https://bugs.chromium.org/p/chromium/issues/detail?id=336876
https://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/