Question

将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中似乎并非如此。如果我取消注释所有mixin中的@apply(--paper-font-common-base)行，它似乎有效。这是浏览器问题吗？

Answer 1

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

更改聚合物纸张元素默认字体

1 个答案: