Web @字体在聚合物/网组件中不起作用

我正在尝试在我的聚合组件中使用web字体，但是该字体无法呈现。有人能解释一下吗？谷歌在这个问题上没有给我太多的爱。如果你需要更多的信息，请告诉我。谢谢

@font-face {
font-family: 'open_sansextrabold';
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
     url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
     url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
font-weight: normal;
font-style: normal;
}

header a {
font-family: "open_sansextrabold";
display: block;
height: 50px;
width: 150px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
transition: background-color 1s ease;
-webkit-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-moz-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
 -o-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
 -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

---

在我看来是正确的，但我也习惯了字体有问题

可以肯定的是，包含字体的css是否处于良好的级别，可以到达文件夹/字体？例如，如果你有一个包含这个文件的css文件夹，你应该使用它

url('../fonts/...)

---

您是否也使用不同的浏览器进行了检查？

好的，我已经解决了这个问题。

@font-face

需要在

外部加载。

---

不知道为什么，但现在一切都正常了。

正在完成答案-在问题之外+1移动@font-face到聚合元素之外并修复相对url对我也很有用！谢谢@Monty！原因是——直到今天——Chrome在ShadowDOM中还不支持@font-face定义。