在单个页面中更改离子标签的字体大小 - Ionic答案

【问题标题】：change font size of ion-label in a single page - Ionic在单个页面中更改离子标签的字体大小 - Ionic
【发布时间】：2018-05-06 01:56:40
【问题描述】：

我想更改离子应用主页中离子标签的字体大小。我读过我可以更改 __variables.scss 文件中的字体大小变量，这可能会影响离子标签。我想我可以做到。但我觉得奇怪的是，在与页面关联的 scss 文件中设置离子标签的样式不起作用。我在网上搜索过，但除了我的方法应该有效之外，我找不到任何关于它的信息。

这是我的 scss：

$primary-color: #cf810c;
$bg-color: #CCFFFF;

page-home {
    .masters{
        background-color:$bg-color;
    }
    ion-label{
        color: $primary-color;
        font-size: 4em;
   }
}

这是我的 html 文件中的内容：

<ion-content padding class="masters">
  <ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>

我的页面如下：

【问题讨论】：

标签： angular typescript ionic-framework sass ionic3

【解决方案1】：

您还可以全局更改添加到 global.scss 中的所有标签字体

ion-label {
  label {
   font-size: 1rem!important;
  }
}

【讨论】：

【解决方案2】：

例如，使用适当的 HTML 元素也可以解决您的问题

    <ion-item>
      <ion-text>
        <h2> {{product.name}}</h2> // BIG
        <h3> {{product.category}}</h3> // MEDIUM
        <h4> {{product.price}}</h4> // SMALL
      </ion-text>
    </ion-item>

【讨论】：

【解决方案3】：

我不鼓励像其他答案那样使用自己的字体大小值/类。 Ionic 有一个定义的字体大小，它可以针对定义的 h1、h2、...、small 和其他标签进行缩放；看这里：https://github.com/ionic-team/ionic/blob/master/core/src/css/typography.scss#L34

我建议您只需使用 <ion-label> 包装其中一个标签，以便在您的应用中保持一致的字体值：

<ion-item
    <ion-label>
        <small>Foo Bar</small>
    </ion-label>
</ion-item>

【讨论】：

【解决方案4】：

抱歉，Sampath 和 Shahab Rauf 的答案对我不起作用：Ionic 4 和 Angular 5。

在另一个命题下：

HTML：

  <ion-label stacked >
      <p class="my-label">Tap and press the buttons to win!</p>
  </ion-label>

SCSS：

page-my-page {
    .my-label {
        font-size: 8em;
      }
}

这里，不需要将SCSS文件添加到Angular组件的styleUrls属性或app.scss中。

希望对您有所帮助。

【讨论】：

【解决方案5】：

您可以在标签中添加一个类并在 CSS 中对其进行编辑。

HTML

<ion-label class="testclass">Your Label</ion-label>

CSS

.testclass{ font-size: 30px !important; }

【讨论】：

【解决方案6】：

你只需要这样做：

这是有效的stackblitz

my-page.html

  <ion-label stacked class="my-label">Tap and press the buttons to win!</ion-label>

my-page.scss

.my-label {
  font-size: 4em;
}

【讨论】：