问题
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 */
}
回答1:
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.
回答2:
Looks correct to me but I'm also used to having problem with the font-face...
Just to be sure, is the css containing your font-face at the good level to reach the folder /fonts? For instance if you have a css folder containing this file you should use
url('../fonts/...)
Did you also check with different browsers ?
来源：https://stackoverflow.com/questions/27675534/font-face-not-working-in-polymer-web-components