将 Polymer Paper Elements 默认字体从 Roboto 更改为自定义字体的最佳方法是什么?
我用了 --paper-font-common-base: {}
mixin 来定义我的字体,这适用于大多数地方......但不是全部。在像 paper-toolbar
这样的地方例如仍然应用Roboto。
有没有另一种方法可以做到这一点?
编辑
我现在看到罪犯了。内paper-styles/typography.html
有很多 mixin 专门定义了字体……例如
--paper-font-title: {
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
为什么是
@apply
这里的块注释掉了?如果默认情况下这些没有被注释,看起来这不会是一个问题。但现在我必须去覆盖每一个 mixin!编辑 2
我看到
typography.html
的顶部有一个注释文件/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
但这似乎不是真的,无论如何在 Chrome 中。如果我取消注释
@apply(--paper-font-common-base)
所有 mixin 中的行似乎都有效。这是浏览器的问题吗?
最佳答案
覆盖 --paper-font-common-base
mixin 是正确的方法。
以下 CSS 代码应该可以工作。
:root {
--paper-font-common-base: {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
};
}
我找不到你指出的问题,它可能已经修复了。检查以下文件时,
--paper-font-common-base
正在按预期应用。https://github.com/PolymerElements/paper-styles/blob/master/typography.html
https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html
关于polymer - 更改 polymer 纸元素默认字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31977706/