@font-face 在聚合物/网络组件中不起作用

Question

我正在尝试将网络字体添加到我的聚合物组件中，但是该字体无法呈现。有人可以对此有所了解吗？谷歌在这个问题上并没有给我太多的爱。如果您需要更多信息，请告诉我。谢谢！

@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 */
}

Answer 1

对我来说看起来是正确的，但我也习惯了字体问题......

为了确定，包含您的字体的 css 是否处于到达文件夹 /fonts 的良好级别？例如，如果您有一个包含此文件的 css 文件夹，您应该使用

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

您是否也检查过不同的浏览器？

Answer 2

好的，所以我已经解决了这个问题。 @font-face 需要在<template> 之外加载。 不知道为什么，但现在一切正常。