更改Polymer纸元素的默认字体 [英] Changing Polymer paper elements default font

问题描述

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

What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?

我用--paper-font-common-base: {} mixin定义了我的字体，这在大多数地方都适用...但不是全部.例如，在paper-toolbar之类的地方，仍然应用Roboto.

I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.

还有另一种方法吗?

编辑

我现在看到罪犯了.在paper-styles/typography.html内部，有大量的mixin专门定义了字体...例如

I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg

--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块被注释掉了?如果默认情况下未对这些内容进行评论，那么看起来这将不是问题.但是现在我必须去覆盖每个混合！

Why are the @apply blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!

编辑2

我看到typography.html文件顶部有一个注释

I see there is a note at the top of the typography.html file

/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/

但是，无论如何，在Chrome中似乎并非如此.如果我取消注释所有mixin中的@apply(--paper-font-common-base)行，那么它似乎可以工作.这是浏览器问题吗?

But this doesn't seem to be true, in Chrome anyway. If I uncomment the @apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?

推荐答案

覆盖--paper-font-common-base mixin是正确的方法.

Overriding the --paper-font-common-base mixin is the correct approach.

以下CSS代码应该可以使用.

The following CSS code should work.

:root {
    --paper-font-common-base: {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    };
}

我找不到您指出的问题，它可能已经解决.检查以下文件时，将按预期方式应用--paper-font-common-base.

I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.

https://github.com/PolymerElements/paper-styles /blob/master/typography.html https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html

这篇关于更改Polymer纸元素的默认字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！