ionic-framework - 为 toast ionic 4 添加很棒的字体

Question

将字体真棒添加到吐司

我找不到在 ionic 4 上为 toast 消息添加字体真棒的方法，因为 ionic 4 是所有 Web 控制器的影子 Dom

标签： ionic-frameworkionic4

Answer 1

您可以按照下一个代码为 toast 添加自定义字体。

import { Component } from "@angular/core";
import { ToastController } from "@ionic/angular";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage {
  constructor(private toastController: ToastController) {}

  async showToast() {
    let toast = await this.toastController.create({
      message: "Your settings have been saved.",
      duration: 2000
    });
    toast.present();
  }

  async showCustomToast() {
    let toast = await this.toastController.create({
      message: "Your settings have been saved.",
      duration: 2000,
      cssClass: "CustomToast"
    });
    toast.present();
  }
}

在Toast 组件的文档中，有一个属性可以定义您的自定义 css 样式。

这个类需要在 src/global.css

.CustomToast {
   font-family: Verdana, Geneva, Tahoma, sans-serif, Helvetica, sans-serif;
}

通常，当您需要自定义组件（警报、加载程序等）时，您需要遵循此过程。

我希望我有帮助:)