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

Question

我正在开发一个通用的聚合物2.0登录页面应用程序,我正在尝试使用自定义字体作为标题栏.

在我的login-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.我是聚合物的新手,有什么我想念的吗？

Answer 1

您可以使用@font-face导入字体。

更新：

您需要使用外部文档进行 @font-face 导入，而不是将其放置在自定义元素模板中。Chrome 中会忽略影子根中的一些 at 规则，请参阅讨论。虽然使用 Polymer 1 时这不是问题，但 Polymer 2 在这方面似乎遵循浏览器的行为。

我建议使用 @font-face 导入的 css 样式表：

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

如果您将其导入到您的index.html中，“font-regular”将在全球范围内可用。或者，您可以仅在自定义元素中导入样式表。