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

Posted 2023-03-07

【中文标题】在单个页面中更改离子标签的字体大小 - Ionic

【英文标题】：change font size of ion-label in a single page - 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>

我的页面如下：

【参考方案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;