如何在聚合物中使用自定义字体

我正在使用通用聚合物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

如何在聚合物中使用自定义字体

回答

相关问题