为什么Font Awesome在我的Shadow DOM中不起作用? [英] Why doesn't Font Awesome work in my Shadow DOM?
问题描述
字体Awesome 在我的影子DOM中不起作用，因为我有以下内容可防止样式泄漏进出:
Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
我可以通过在:host属性中内联其他样式表来使用其他样式表，但这不适用于Font Awesome，因为它在样式表中使用相对路径.
I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet.
我找到了这并使用我实现的范围CSS进行了尝试，但是图标显示为正方形，如
I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example.
推荐答案
我在StencilJS上遇到了同样的问题. 经过数小时的奋斗和@Intervalia的回答，我得以解决它.
I had the same issue with StencilJS. After hours of struggle and the answer from @Intervalia I was able to fix it.
问题在于，当仅在阴影dom(您的自定义Web组件)中包含字体文件时，浏览器不会加载字体文件.这意味着这些字体也必须包含在普通的html文件(也称为light DOM)中，以便浏览器可以检测并加载它们，以使其在影子dom中可用.
The problem is that the browser doesn't load the font files when they are only included in the shadow dom (your custom web component). This means that the fonts also has to be included in the normal html file (aka light DOM) so that the browser can detect and load them in order to make them available in the shadow dom.
就我而言，我没有使用Font awesome，而是使用了自定义字体，但是我第二次尝试使用Font awesome和一个干净的Stenciljs项目.解决方案始终相同，无论您需要哪种自定义字体都没关系.
In my case I didn't use Font awesome instead it was a custom font but I tried it a second time with font awesome and a clean Stenciljs project. The solution is always the same doesn't matter which custom font you need.
步骤1:将字体移到您的项目中.我在"src"文件夹中创建了一个单独的"assets"文件夹，以便可以从所有组件进行访问.在此示例中，我为Web环境 https://fontawesome.com/download 下载了很棒的字体. (我不建议您使用"npm install"，因为您也必须在index.html中使用它)
Step 1: Move the font into your project. I created a seperate "assets" folder inside the "src" folder to have access from all the components. In this example I downloaded font awesome for web environment https://fontawesome.com/download. (I wouldn't recommend "npm install" since you have to use it in the index.html too)
步骤2:准备您的Web组件(在本例中为my-component.tsx).您可以使用styleUrl s 属性导入多个CSS文件.只需从您的资产目录导入fontawesome css.
Step 2: Prepare your web component (in this case my-component.tsx). You can import multiple css files using the styleUrls property. Just import the fontawesome css from your assets directory.
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
@Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
步骤3 准备要在其中使用组件的文件(在本例中为index.html).重要的一行是链接"标签.这再次包括真棒字体css"，并强制浏览器真正下载字体.
Step 3 prepare the file where you want to use the component (in this case index.html). The important line is the "link" tag. This includes the "font awesome css" again and force the Browser to really download the fonts.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
我知道这感觉不对并且看起来很奇怪，但是仅在索引html或Web组件中包含很棒的字体是不够的.它必须确实包含在两个文件中.这并不意味着浏览器会多次加载它-只会加载一次.
I know it feels wrong and looks weird but it is not enough to include font awesome only in the index html or in the web component. It must really be included in both files. That doesn't mean the Browser will load it multiple times - it will only be loaded once.
这意味着您无法通过Web组件交付字体-据我所知.这不是stenciljs错误，这是浏览器的普遍问题.如果您有更好的解决方案，请告诉我.
That means that you can't deliver the font with the web component - as far as i know. This isn't a stenciljs bug this is a general problem of the browsers. Please let me know if you have better solutions.
这只是一个有趣的截图，它显示了当浏览器仅包含在一个文件中时，它不会加载字体. http://prntscr.com/p2f9tc
Just for fun here is a screenshot that shows that the browser doesn't load the fonts when it is only included in one file. http://prntscr.com/p2f9tc
更新05.10.2019:
Update 05.10.2019:
如果要在Web组件内使用字体，则上面的说明是正确的并且仍然是必要的.但是，您也可以在Web组件内使用slot标签.比起您自动将字体从外部(html)绕到Web组件中.但是请注意，它仅适用于您在Web组件的标签之间编写的内容.
这意味着您可以使用<my-component> <i class="your-font"/> </my-component>.在这种情况下，您不必将字体导入Web组件.
If you want to use your font inside your web-component the explanation above is correct and still necessary. But you can also use the slot tag inside the web-component. Than you automatically bypass the font from outside (the html) into the web-component. But notice it only works for the stuff you write between the tags of your web component.
That means you can use <my-component> <i class="your-font"/> </my-component>. In this case you don't have to import the font into the web components.
这篇关于为什么Font Awesome在我的Shadow DOM中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
