0
問題：如何讓Google字體（Varela Round）在Polymer 1.1 Web組件中工作？
在聚合物1.1上下文，如何包括外部字體（如谷歌字體或字體-真棒）用於我的DOM模塊？
我知道現在聚合物偏愛使用樣式模塊。我也知道 技術將字體預加載到html並將其導入到我的 dom模塊中。但我仍然無法實現它的工作。
我<circle-x></circle-x>組件的目標：
我的DOM模塊基本上給圈到這些圖像，下面有個<h1>已經風格。然後在flexbox結構下根據有多少個圓圈作出響應。
我試過（TLDR版） 我用rel="import"一個font.html到樣式模塊然後我<circle-x>組件，但不能使用樣式的字體（它的工作原理，當我用無襯線），這意味着我選擇它的權利。我也谷歌檢查它和谷歌字體樣式表加載在<circle-x>組件頁面。
我試過（詳細信息）：
<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
- polymer.html
+ - webcomponentsjs
- webcomponents.js
聚合物文件，我注意到有一個叫做roboto.html文件，所以我做了類似的文件。
<!-- varela-round.html -->
<link rel="import" ref="https://fonts.googleapis.com/css?family=Varela+Round>
再就是typography.html到roberto.html
<!-- typography.html -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<style is="custom-style">
:root {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
}
參考，我做我自己的排版，x.html的版本我瓦雷拉回合字體：
<!-- typography-x.html -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="varela-round.html">
<style is="custom-style">
:root {
--circle-x-font-base: {
font-family: 'Varela Round';
};
}
</style>
現在在我自己的模塊中，名爲circle-x.html，我嘗試使用字體，但沒有運氣。
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="typography-x.html">
</head>
<dom-module id="circle-x">
<template>
<style is="custom-style">
.font{
font-family: var(--circle-x-font-base, sans-serif);
color: var(--circle-x-color, #353B39);
font-size: var(--circle-x-font-size, 2rem);
margin: 1rem auto 2rem;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 200px;
margin: 20px;
height: 250px;
}
.img{
position: relative;
width:200px;
height:200px;
border-radius: 50%;
background-color: #E2E4E3;
box-shadow: 2px 2px 2px gray;
}
.img img{
width:100px;
height:100px;
}
.img:hover{
box-shadow: 5px 5px 5px gray;
cursor: pointer;
}
.placeholder{
position: absolute;
right:50px;
bottom:50px;
}
</style>
<div class="wrapper">
<a href="{{href}}" class="img">
<img class="placeholder" src="{{img}}">
</a>
<h2 class="font">{{text}}</h2>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "circle-x",
properties:{
img: {
type:String,
value:"http://www.placehold.it/100x100?text=IMG"
},
href: {
type:String,
value:"http://lightandlovehome.org"
},
text: {
type:String,
value: "test"
}
}
});
</script>
最後，我想設置羅伯託我所有的一組元素之外的默認字體，並使用CSS變量來改變他們，當我需要。感謝閱讀，我觀看了許多YouTube視頻，文章和聚合物網站/文檔，但找不到解決方案。
我推特@ebidel，他說我應該使用導入，並給了我這個鏈接，但我覺得我做到了。 https://github.com/PolymerElements/font-roboto/blob/master/roboto.html
circle-x不應該有頭標籤，也不應該有webcomponentsjs的腳本標籤（順便說一句，你想使用webcomponentjs/webcomponents-lite.js，而不是webcomponents.js ...但只能在你的index.html文件中）。 嘗試刪除這些。 – robdodson
我想我看到問題（有幾個），但也可能有一個字體家族的錯誤。挖掘它... – robdodson