2

--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 导入 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 ，我明确不希望它这样做。

例如，其他 Polymer 组件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 组件使用与我的应用程序其余部分相同的字体？

4

5 回答 5

0

If you want this font to work on the entire web app, is your

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

declared into a custom-style element ?

If not try that :

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

And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.

Edit :

There is a plunker example.

于 2017-10-31T11:44:07.390 回答
0

在我看来<custom-style>是直接加载到您的<head>标签中，因为它包含在<script>标签中。

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

于 2017-10-27T10:48:16.263 回答
0

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

于 2017-10-27T12:43:07.747 回答
0

添加.bowerrc这个：

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

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

于 2019-01-06T05:52:39.883 回答
0

我建议

  1. 分叉<paper-dialog>，并删除导入typography.html
  2. 加载您自己的副本<paper-dialog>
  3. 提交票证或拉取请求<paper-dialog>
  4. 如果您的更改被官方接受，请<paper-dialog>再次加载官方。
于 2017-10-30T04:29:34.447 回答