编辑：

Question

在加载任何组件之前，我有一个指定了显式--paper-font-common-base的Polymer 2应用程序：

--paper-font-common-base: {
    font-family: 'Comic Sans'; 
    /* Not really, nobody's that evil, but problem is there for any font */
};

然后，在某些时候加载Polymer组件，例如paper-dialog，将导入typography.html

<link rel="import" href="../paper-styles/typography.html">

反过来typography.html imports Roboto和overrides the mixin：

<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
    <style is="custom-style">
        html {
            --paper-font-common-base: {
                font-family: 'Roboto', 'Noto', sans-serif;
                -webkit-font-smoothing: antialiased;
            };

这会覆盖我指定的字体，但也可以从Google's CDN下载Roboto，我明确不希望这样。

其他聚合物组件，例如paper-radio-button采用不同的方法：

/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/

如何设置--paper-font-common-base以便Polymer组件使用与我的应用程序其余部分相同的字体？

Answer 1

我认为<custom-style>正在加载<head>标记，因为它已包含在<script>标记中。

为了克服这种行为，您还需要在<head>标签中将您的脚本添加到更高的位置。

Answer 2

解决此问题的一种方法是使用空font-roboto文件创建自己的roboto.html依赖项。然后在您的bower.json中，您将强制您的依赖关系成为font-roboto冲突的解决方案。

Answer 3

我建议

分叉<paper-dialog>，并移除typography.html
加载您自己的<paper-dialog>
为<paper-dialog>
如果您的更改已被正式接受，请再次加载官方<paper-dialog>。

Answer 4

如果您希望此字体适用于整个网络应用，那么

--paper-font-common-base: {
    font-family: 'Comic Sans';
};

声明为custom-style元素？

如果没有尝试：

<custom-style>
  <style>
        html {
            --paper-font-common-base: {
                font-family: 'Comic Sans'; 
            };
        }
  </style>
</custom-style>

如果你将它添加到root元素中，它应该应用于所有子元素，除非某些自定义组件覆盖它们自己的字体。

编辑：

有一个plunker示例。

Answer 5

在.bowerrc中添加：

{
  "scripts": {
    "postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
  }
}

构建后，roboto.html将成为一个空文件而没有任何错误请求。

使用没有Roboto的Polymer

5 个答案:

编辑：