@ font-face在聚合物/Web组件中不起作用 [英] @font-face not working in polymer/web-components

问题描述

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

I'm trying to get a web font into my polymer component, however the font is failing to render. Could someone shed some light on this? Google hasn't been giving me much love on this issue. If you need any more info then just let me know. Thanks!

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

推荐答案

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

OK, so I have worked this out. The @font-face needs to be loaded outside of the <template>. Not sure why, but it's all working now.

这篇关于@ font-face在聚合物/Web组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！