改变聚合物纸元素的默认字体

将Polymer Paper Elements的默认字体从Roboto更改为自定义字体的最佳方法是什么?

我使用–paper-font-common-base:{} mixin来定义我的字体,这在大多数地方都有效,但不是全部.在诸如纸工具栏的地方,例如还有Roboto应用.

有另一种方法吗?

编辑

我现在看到罪犯了内部的纸张样式/ typography.html有很多混合的专门定义字体…例如

--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中,这似乎并不是真的.如果我取消注释所有mixin中的@apply( – paper-font-common-base)行,它似乎工作.这是浏览器问题吗?

覆盖–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

相关文章
相关标签/搜索