【问题标题】：Using Polymer without Roboto在没有 Roboto 的情况下使用 Polymer
【发布时间】：2018-04-08 22:30:26
【问题描述】：

我有一个 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.htmlimports 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，这是我明确不希望的。

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

【问题讨论】：

我不确定，但html, paper-dialog { --paper-...} 还不够吗？只需在 html 之后添加 paper-dialog 即可将 css 直接应用于纸质对话框。另一种选择是在您以自己的风格定义`--paper-font-common-base`之前自行导入typography.html
@KubaŠimonovský 无论如何它都会导入typography.html，并且首先自己导入它仍然会添加在覆盖它们之前我不需要加载页面的请求。指定特定的控件并不能阻止这一点，即使我有所有这些的结论性列表。

标签： javascript css polymer polymer-2.x html-imports

【解决方案1】：

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

要克服这种行为，您还需要在 <head> 标记中添加脚本。

【讨论】：

你从哪里得到的？问题中引用的<custom-style> 是在typography.html 中导入的（paper-styles 的一部分，不是我的代码）-在请求导入之前，我对--paper-font-common-base 的定义已经加载。
不确定 - 我刚刚看到
你在哪里看到<script>标签？ !important CSS 规则上的标志在最好的时候是一个糟糕的组合，但它对 Shadow DOM 根本没有帮助，因为样式不会级联。
<style is="custom-style">
不过我可能弄错了，因为我的回答很推定，因为我看不到该站点并检查该元素

【解决方案2】：

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

【讨论】：

这会阻止字体被覆盖，但也会导致额外的请求和错误。

【解决方案3】：

我建议

fork <paper-dialog>，并删除typography.html 的导入
加载您自己的<paper-dialog> 副本
为<paper-dialog> 提交票证或拉取请求
如果您的更改被官方接受，请再次加载官方<paper-dialog>。

【讨论】：

干杯。作为最后的手段，我可以这样做，但是有很多聚合物组件可以做到这一点，大约是 paper-* 的一半，而不仅仅是 paper-dialog。我想先确定没有更好的方法。
我已经提出了this issue with paper-dialog 和paper-input，但是还有更多的地方可以这样做。

【解决方案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>

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

编辑：

有一个plunker 的例子。

【讨论】：

是的，<custom-style> 包装器正是我正在做的事情（没有它，mixin 根本无法工作），而覆盖自己字体的自定义组件正是我在题。如何阻止 Polymer 自定义元素（专门来自 Polymer OSS 团队的元素）覆盖 Polymer 为全局样式提供的 mixin --paper-font-common-base？
我创建了一个plunker，也许可以帮助你。为了设置错字，我必须将 typography.html 导入到 my-custom-style.html 元素。颜色变量也一样，没有 default-theme.html 导入它不起作用。
这似乎有效并且是一个聪明的解决方法，但仍然会下载排版和机器人，然后重载它们。理想情况下，我不想下载我的应用不需要的任何资源。

【解决方案5】：

在.bowerrc 中添加：

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

它会将roboto.html 变成一个空文件，在构建之后不会出现任何错误请求。

【讨论】：

对于一开始不应该请求的空文件来说，这仍然是一个往返。如果我要对库进行后处理，我会删除对文件的引用，而不是清空文件。
@Keith 好吧，除非您想遍历所有 paper 元素，否则这是解决此问题的最快方法。在这种情况下，您的后期处理脚本会更大。由于polymer build 会将空文件合并到主包，因此不会发出其他请求。所以清空文件更好，除非你使用推送协议并为它构建。