可以更改 ion-navbar 中的 ion-title 大小吗？答案

【问题标题】：It is possible to change the ion-title size inside ion-navbar?可以更改 ion-navbar 中的 ion-title 大小吗？
【发布时间】：2019-01-10 01:03:08
【问题描述】：

<ion-navbar color="primary">
  <ion-title>Atualizado em: {{ultimaAtualizacao |  date:'dd/MM/yyyy'}}</ion-title>
</ion-navbar>

我想改变ion-title的文字大小，我已经尝试过使用css，但是没有改变。

【问题讨论】：

标签： angular ionic2 ionic3

【解决方案1】：

如果您想为应用的每个页面更改它，您可以使用 sass 变量。您需要在 variables.scss 文件中添加以下内容：
```
$toolbar-ios-title-font-size: 1.7rem;
$toolbar-md-title-font-size: 2rem;
$toolbar-wp-title-font-size: 1.5rem;
```
这些是默认值，因此您可以在此处设置所需的值。

如果您想只在一页中进行更改，则不应使用 sass 变量。相反，在该页面的 scss 文件中使用简单的 css 规则：

your-page {

  toolbar-title toolbar-title-ios { 
    font-size: 1.7rem;
  }

  toolbar-title toolbar-title-md { 
    font-size: 2rem;
  }

  toolbar-title toolbar-title-wp { 
    font-size: 1.5rem;
  }

}

编辑：

如果使用 css 规则不起作用，则可能是与这些规则的特殊性有关的问题。您可以尝试像这样包装页面的样式：

.ios, .md, .wp {

  your-page {

    // Put your css rules here!

  }

}

通过这样做，您可以提高自定义 css 规则的特异性，并覆盖 Ionic 的 css 规则。

【讨论】：

css中应该有3个toolbar-title toolbar-title-ios吗？
糟糕！感谢您指出@johnny5。每条规则都假设针对不同的平台（我已在答案中编辑了该错误）。
@sebaferras 谢谢我会自己修复它，但我不确定 css 类，你知道我可以找到所有 Ionic sass 变量的页面吗？跨度>
当然！ here你可以找到所有的sass变量@johnny5

【解决方案2】：

离子 3：

把这个声音放到你的scss 页面上：

.toolbar-title-md {
    font-size: 1.5rem !important; // Default should be 2.0rem
}

【讨论】：

这只会改变android上的离子标题。

【解决方案3】：

根据官方 API 文档，可以覆盖 SASS 变量。 Check it out...

【讨论】：

【解决方案4】：

您使用以下方式访问标题：

ion-toolbar .toolbar-title{
  font-size: 100%;
}

【讨论】：