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

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

Answer 2

对我来说看起来不对，但我也常常遇到有关font-face的问题......

可以肯定的是，包含你的font-face的css是否达到文件夹/字体的良好水平？例如，如果您有一个包含此文件的css文件夹，则应使用

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

你还检查过不同的浏览器吗？

@ font-face无法在聚合物/网络组件中使用

2 个答案: