polymer - 如何在 polymer 中使用自定义字体

Question

我正在开发一个通用的 polymer 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。我是 polymer 的新手，有什么我遗漏的吗？

Answer 1

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

更新:

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

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

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

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