首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Ionic 4中安装新字体?

如何在Ionic 4中安装新字体?
EN

Stack Overflow用户
提问于 2018-08-09 04:22:08
回答 3查看 27.4K关注 0票数 25

有人知道如何更新Ionic 4的字体吗?

我尝试将aileron.woff添加到资源/字体中,并将其放入variables.scss中,但无济于事。

代码语言:javascript
复制
  src: url('../assets/fonts/aileron.woff') format('woff');
EN

回答 3

Stack Overflow用户

发布于 2018-08-19 16:21:19

你似乎对离子4/ Angular很感兴趣。

我刚刚在Ionic 4.0.0测试版中创建了一个测试应用程序,模板为"blank“。下面是我放到variable.sccs中用来跨平台更改所有字体的内容:

代码语言:javascript
复制
:root,
:root[mode=ios],
:root[mode=md] {
  --ion-font-family: "Palatino", "Times New Roman", serif !important;

  font-family: "Palatino", "Times New Roman", serif !important;
}

在我的Mac上,我看到了"Palatino“。

关键是,使用"!important“。就Beta而言,字体的主题化还没有文档化。它可能会在以后被澄清,或者行为可能会在最终发生变化。请记住这一点。

票数 7
EN

Stack Overflow用户

发布于 2019-05-17 02:44:57

将您的字体添加到目录assets中,并将其添加到variables.scss文件中,以声明字体系列并设置使用它的类:

代码语言:javascript
复制
@font-face {
  font-family: 'custom';
  src: url('../assets/fonts/custom.ttf');
}
.text-custom { 
  font-family: "custom"; 
}

然后,在任何xx.page.html中,您都可以像这样使用该类:

代码语言:javascript
复制
<span class="text-custom">your text</span>
票数 7
EN

Stack Overflow用户

发布于 2018-08-09 08:15:53

您将需要使用CSS4变量--ion-font-family

下面是一个示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Test Font Family</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/@ionic/core@4.0.0-beta.2/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.2/css/ionic.min.css">
  <style>
  @font-face {
    font-family: 'Hanalei Fill';
    font-style: normal;
    font-weight: 400;
    src: local('Hanalei Fill'), local('HanaleiFill-Regular'), url(https://fonts.gstatic.com/s/hanaleifill/v6/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2) format('woff2');
  }

  :root {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=md] {
    --ion-font-family: 'Hanalei Fill';
  }
  :root[mode=ios] {
    --ion-font-family: 'Hanalei Fill';
  }
  </style>
</head>

<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Test</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content id="content" fullscreen>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Font Family</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Testing
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</body>
</html>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51755047

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档