在没有 Roboto 的情况下使用 Polymer

Question

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

--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 导入 Roboto并覆盖 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 的 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

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

Answer 3

我建议

1. Fork <paper-dialog> ，去掉typography.html的导入
2. 加载您自己的<paper-dialog>副本
3. 为<paper-dialog>单或拉取请求
4. 如果您的更改被正式接受，请再次加载官方<paper-dialog> 。

Answer 4

如果您希望此字体适用于整个 Web 应用程序，

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

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

编辑 ：

有一个plunker的例子。

Answer 5

在.bowerrc添加：

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

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