Fonts Web组件-字体和材质图标不工作（@font-face）_Fonts_Font Face_Web Component

Fonts Web组件-字体和材质图标不工作（@font-face）

fonts

Fonts Web组件-字体和材质图标不工作（@font-face）,fonts,font-face,web-component,Fonts,Font Face,Web Component,我试图通过运行以下命令，使用vue cli 3创建web组件 vue cli服务构建--目标wc--命名wc演示'src/App.vue' 我面临着在web组件中加载字体和材质图标的问题我正在导入roboto font.scss和材质图标.scssApp.vue的内部样式标签，该标签是用于创建web组件的条目 <style lang='scss'> // @import url('https://fonts.googleapis.com/css?family=Roboto:400,

我试图通过运行以下命令，使用vue cli 3创建web组件

vue cli服务构建--目标wc--命名wc演示'src/App.vue'

我面临着在web组件中加载字体和材质图标的问题

我正在导入roboto font.scss和材质图标.scssApp.vue的内部样式标签，该标签是用于创建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>

机器人字体.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;
}

$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");
}

当使用

纱线

。字体在“网络”选项卡中加载良好，但在构建web组件并使用“live server”将其加载到浏览器中后，字体不会在“网络”选项卡中加载

使字体和图标工作的唯一方法是向index.html文件添加链接标记。但不在web组件中（在影子Dom中）


wc演示
文件
<!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>