如何在聚合物中使用自定義字體

我正在使用通用聚合物2.0登錄頁面應用程序，並試圖爲標題欄使用自定義字體。如何在聚合物中使用自定義字體

在我登錄-page.html中，我有這樣的自定義樣式：

<custom-style> 
    <style is="custom-style"> 
      body { 
      margin: 0; 
     }   
     app-toolbar { 
      background-color: #4F1585; 
      font-family: 'Roboto', Helvetica, sans-serif; 
      color: white; 
      --app-toolbar-font-size: 24px; 
     } 
     #maintitle{ 
      color: red; 
      font-family: 'font-regular'; 
     } 
    </style> 
</custom-style>

我的頭/工具欄：

<app-header fixed condenses effects="waterfall"> 
    <app-toolbar> 
     <img src="../icons/app-icon.png" style="height:100%;"/> 
     <div main-title id="maintitle">Login Page</div> 
    </app-toolbar> 
</app-header>

我導入TTF文件是這樣的：

<link rel="stylesheet" href="../fonts/font-regular.ttf" type="css">

該代碼將文本變爲紅色，但不適用字體。相反，它會切換到Times new roman。我是聚合物品牌的新手，有什麼我失蹤的？

來源

2017-05-05 RandomStranger

嗯，在我的代碼中，我是這樣做的：'@import url（'https://fonts.googleapis.com/css?family=Montserrat:300,500,700'）;'但我不擅長這一點，而我讓別人來回答。在你的情況下，你應該propably遵循這個：http://stackoverflow.com/questions/7961721/how-do-i-install-a-custom-font-on-an-html-site –

@KubaŠimonovský我已經遵循這個答案，但它沒有奏效..我會等待更多的迴應！ – RandomStranger

您可以使用@font-face導入您的字體。

UPDATE：

您需要使用外部文檔的@字體面進口，而不是將其放置在自定義元素模板。 Chrome中忽略了影子根目錄中的某些規則，請參閱discussion。雖然使用聚合物1不是問題，但聚合物2似乎遵循瀏覽器在這方面的行爲。

我建議有一個與@字體面導入CSS樣式表：

@font-face { 
    font-family: "font-regular"; 
    src: url("./font-regular.ttf") format("truetype"); 
}

如果導入在您的index.html，「FONT-常規」將在全球上市。或者，您只能在自定義元素中導入樣式表。

來源

2017-05-06 09:23:40 vikdoro

這似乎不適用於我，它只是變回了新的羅馬時代。任何想法爲什麼？ – RandomStranger

您是否檢查字體是否在控制檯中顯示404？也許你的相對路徑不正確。 – Ergo

其實，我原來的建議似乎不適用於Chrome上的Polymer 2。我會更新我的答案。 – vikdoro

如何在聚合物中使用自定義字體

回答

相關問題