如何在 Ionic 4 中更改离子按钮的字体粗细？答案

【问题标题】：How do I change font weight for ion-button in Ionic 4?如何在 Ionic 4 中更改离子按钮的字体粗细？
【发布时间】：2019-09-21 07:59:28
【问题描述】：

在 Ionic 4 中，我知道对于某些事情我应该使用 shadow dom，并像这样修改组件：

ion-button {
  --ion-font-family: 'Montserrat', sans-serif;
  --border-radius: 8px;
}

但是如果我想改变按钮的字体粗细怎么办？

如果您查看按钮的 css，您会发现没有像 padding 或 font-family 那样用于权重的 shadowdom css 变量：

.sc-ion-buttons-md-s ion-button {
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-start: 8px;
    --padding-end: 8px;
    --box-shadow: none;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
}

据我所知，我能做到的唯一方法是像这样进行内联样式：

<ion-button color="primary" fill="solid" shape="round">
  <p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>

但现在我感觉又回到了 1996 年。有什么干净的方法可以做到这一点？

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

我补充说：

ion-button {
    font-weight: 700;
}

我的一个随机项目，它按预期工作。

然后我添加了 <p> </p> 标签，就像你在我的按钮内的示例代码中一样，带有按钮的文本，font-weight 不再影响文本。

如果您正在使用 <p> </p> 标签，请删除它们，然后再试一次。

【讨论】：