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中会忽略影子根目录中的某些规则，请参阅discussion。虽然使用Polymer 1时不是问题，但Polymer 2在这方面似乎遵循浏览器行为。

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

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

如果你在index.html中导入它，＆＃34; font-regular＆＃34;将在全球范围内提供。或者，您只能在自定义元素中导入样式表。

Answer 2

要将字体导入聚合物，请使用链接href，然后应用字体示例

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">

html, body {
 font-family:'Fira Sans', sans-serif;
}

你也可以覆盖--paper-font-common-base font

 html, body {
     font-family:'Fira Sans', sans-serif;
 --paper-font-common-base: {font-family:'Fira Sans', sans-serif;}
    }

如何在聚合物

2 个答案: