可以改变离子导航栏内的离子标题大小吗？

Question

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

我想更改离子标题的文字大小，我已经尝试过使用css，但它没有改变。

Answer 1

1. 如果您想为应用的每个页面更改，您可以使用sass变量。您需要在variables.scss文件中添加以下内容：

   $toolbar-ios-title-font-size: 1.7rem;
   $toolbar-md-title-font-size: 2rem;
   $toolbar-wp-title-font-size: 1.5rem;
   

   这些是默认设置，因此您可以设置所需的值。

2. 如果您想仅在一个页面中更改，则不应使用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规则。

Answer 2

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

Answer 3

IONIC 3：

将此声音放在您的scss页上：

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

Answer 4

您通过以下方式访问标题：

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