在聚合物元素中加載web字體的正確方法是什麼

我創建了一個模擬7段顯示的小聚合物元素，該元素需要加載字體fontlibrary.org/face/segment7。在聚合物元素中加載web字體的正確方法是什麼

哪裏以及如何正確加載元素的方式？

起初，我把：

<link rel="import" href="../polymer/polymer.html"> 
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/>

中的元素。這是不工作在Firefox（但它是在鉻），所以我搜索了更多，並找到www.polymer-project.org/1.0/docs/devguide/styling#style-modules所以我修改了元素，以反映並修改我的代碼於：

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="font-segment7.html">

，並創建了一個字體segment.html文件：

<dom-module id="font-segment7"> 
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/> 
</dom-module>

的結果是一樣的，在鉻工作，不能在Firefox（沒有錯誤和字體segment.html文件被下載），所以，我想知道這種間接是爲此設計的，我覺得它更多的是共享風格，而不是一個鏡頭。

該元素的演示是在這裏https://potens1.gitlab.io/seven-segment-element/components/seven-segment-element/和代碼庫是有https://gitlab.com/potens1/seven-segment-element

這是webcomponents的工作方式（聚合物？），還是應該字體嵌入組件？

謝謝。

PS：對不起，沒有足夠的信譽來發布鏈接

來源

2016-07-28 potens

我會定義正確的方式包括字體作爲聚合物項目做它的方式：font-roboto

的「元素」組成的只是一個<style>標記。

對於你這個應該是這樣的（font-segment7.html）：

<link rel="stylesheet" href="https://fontlibrary.org/face/segment7"/>

這對我的作品在Firefox與seven-segment-element。

注意： fontlibrary提供segment7字體爲.otf（OpenType），它只在IE中部分支持。

來源

2016-07-28 07:18:00 Marc

嗨，謝謝你的回答，對於ff的東西，我不明白爲什麼'type =「text/css」'被阻止。對於主要問題，不同之處在於font-roboto被很多紙質元素所使用，font-segment7不會被重用（或者很少，我猜）。我發現它很多沒有任何好處的鍋爐板，這就是爲什麼我想知道好用法。這聽起來有點奇怪，font-roboto不遵循[doc]中的解釋（https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules）（沒有dom-module ）。 – potens

好吧，'dom-module'用來構造一個元素。字體包含並不是一個真正的元素，因爲您希望在包含它的元素中使用該字體，而不是將字體作爲包含它自己內容的元素。你可以將字體與mixin進行比較（比如[iron-flex-layout]（https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html）），「不遵循doc中解釋的內容」 – Marc

在聚合物元素中加載web字體的正確方法是什麼

回答

相關問題