聚合物集纸张输入字体系列

Question

如何为 paper-input 设置不同的字体系列。当我检查 chrome 中的元素时，它似乎从许多 class 中获得了样式。不确定要覆盖哪个，还有 -0 在 class.

中的含义

Answer 1

Paper Input's styling documentation delegates to its bundled Paper Input Container's styling documentation，但它仍然没有提供覆盖字体样式的方法。

幸运的是，你可以看到它在 paper-input-container.html source code and overwrite the global Material Design Typography at paper-styles/typography.html 上使用了哪些字体，但我认为不鼓励这样做，因此他们没有将其作为可定制的样式。

您截取的截图对应的样式如下：

paper-input-container.html:

  .input-content ::content input,
  .input-content ::content textarea,
  .input-content ::content iron-autogrow-textarea,
  .input-content ::content .paper-input-input {
    position: relative; /* to make a stacking context */
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    color: var(--paper-input-container-input-color, --primary-text-color);
    -webkit-appearance: none;
    text-align: inherit;
    @apply(--paper-font-subhead);
    @apply(--paper-input-container-input);
  }

paper-styles/typography.html:

--paper-font-common-base: {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* [...] */

--paper-font-subhead: {
  @apply(--paper-font-common-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
};

无论如何，-0前缀只是一个索引。如果您有两个相同类型的聚合物元素，它将在第一个元素上放置一个 -0 前缀，在第二个元素上放置一个 -1 前缀。我不确定，但我猜它们已被翻译成 CSS select 或使用 updateStyles，因为您可以通过 JavaScript 分别自定义每个，所以它有助于在翻译 :root 和 ::content 关键字时单独命名每个元素。

所以，如果你想覆盖这个特定的元素，我会告诉你使用 -0 前缀，否则使用更通用的 class 或元素来正确 select一般而言。

聚合物集纸张输入字体系列

Polymer set paper-input font family

css

fonts

polymer

paper-elements

polymer-1.0