roh*_*tvc 5 fonts font-face web-component
我正在尝试通过运行以下命令使用 vue cli 3 创建一个 Web 组件
vue-cli-service build --target wc --name wc-demo 'src/App.vue'
我在 Web 组件中加载字体和材质图标时遇到问题。
我进口的Roboto-font.scss和材料icon.scss的风格标签内App.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>
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");
}
使用运行项目时一切正常
纱线服务
. 字体在网络选项卡中加载良好，但在构建 Web 组件并使用“实时服务器”将其加载到浏览器后，字体不会在网络选项卡中加载。
我可以使字体和图标工作的唯一方法是向 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/
我不确定这个问题是否仍然与作者相关，但是：
我对这个主题做了相当多的研究，我发现：
无法从 Web 组件内部导入字体。Web 组件是自我隔离的。他们有自己的 DOM 树。这基本上意味着父文档头部包含的任何样式在 Web 组件中都将不可用。
在 Web 组件中使用自定义字体的唯一方法是：
a)禁用 Shadow dom。然后您可以在父文件（例如 head 标签）中获取字体并从 Web 组件内部使用这些字体。
b)包括父组件和 Web 组件的字体定义（这是代码重复）。
更新
经过一些实验，我似乎找到了解决方案。在下面的示例中，我使用StencilJS，它是专用于 Web 组件开发的工具。
使用 javascript / typescript 可以获取影子根元素的样式节点。要访问此元素，我使用以下命令：
@Element() private element: HTMLElement;来自 StencilJS 文档：
@Element() 装饰器是如何访问类实例中的宿主元素的。这会返回 HTMLElement 的实例，因此可以在此处使用标准 DOM 方法/事件。
现在我可以访问样式节点并在那里设置（导入）前端。将字体导入作为常规字符串加入到样式中：
this.element.shadowRoot.querySelector('style').innerText += "@import url('https://fonts.googleapis.com/css2?family=Almendra+Display&family=Open+Sans:wght@200&display=swap');";
this.element.shadowRoot.querySelector('style').innerText += "p {font-family: 'Almendra Display', cursive;}";这是我用于使用 Stencil 构建的 Web 组件的解决方案。我坚信使用 React 也可以实现同样的目标。我认为这也可以在不使用任何框架的情况下完成。
| 归档时间： |
|
| 查看次数： |
1106 次 |
| 最近记录： |