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

发布时间：2020-12-13 20:47:36 所属栏目：百科来源：网络整理

导读：我正在开发一个通用的聚合物2.0登录页面应用程序,我正在尝试使用自定义字体作为标题栏. 在我的login-page.html中,我有自定义样式： custom-style style is="custom-style" body { margin: 0; } app-toolbar { background-color: #4F1585; font-family: 'Robo

我正在开发一个通用的聚合物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.我是聚合物的新手,有什么我想念的吗？

您可以使用@ 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中导入它,则“font-regular”将在全球范围内可用.或者,您只能在自定义元素中导入样式表.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!