polymer-1.0 - 如何更改Polymer Paper组件的字体

标签 polymer-1.0

我正在尝试从简单的消息对话框开始学习如何使用 Google 的 Polymer 1.0 组件。对话框出现,但它没有我在 Google 的 Polymer 演示中看到的样式,因此我尝试向对话框添加样式以匹配我在 Google 演示中看到的样式:

<html>
<head>
    <script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <style type="text/css">
        paper-dialog {
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 24px;
        }
    </style>
</head>
<body>

<paper-dialog opened="true">Dialog test</paper-dialog>

</body>
</html>

填充值工作正常,但字体系列和字体大小被忽略。我知道字体下载正常,因为在对话框出现之前,使用 Roboto 字体的“测试对话框”文本会短暂出现在页面顶部。控制台中没有错误。

让对话框接受我想要的样式的正确方法是什么?请注意,我可以使用带有所需字体样式的 div 来包装对话框内容,但我怀疑这是否被认为是在 Polymer 中执行此操作的正确方法。

最佳答案

您可能需要导入 paper-styles-classes.html

根据您的示例,尝试添加

<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">

或查找类似的文件。

关于polymer-1.0 - 如何更改Polymer Paper组件的字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31415359/

相关文章:

javascript - Polymer 中的动态数据绑定(bind)

javascript - Polymer Iron-form 不提交

javascript - Polymer 元素中的 getElementById

google-chrome - paper-input 自动完成无法填写

javascript - 当删除其他数组项时,dom-repeat 中的 polymer 纸张对话框将打开

javascript - 与纸标签一起使用时,在铁页中预选默认页面

javascript - polymer this.push 不起作用

html - polymer :将属性传递给子元素不起作用

javascript - 如何从多个主机加载Polymer组件?

javascript - 如何使用 ES6 将 javascript 函数导入 Polymer 1.0 组件?