Question

有人知道如何为Ionic 4更新字体吗？

我尝试将aileron.woff添加到资产/字体中，并将其放在variable.scss中无效。

  src: url('../assets/fonts/aileron.woff') format('woff');

Answer 1

这是我设法在Ionic应用程序中添加自定义字体的方法

将包含字体文件的目录添加到项目src\assets\fonts下的项目

src\assets\fonts\myCustomFont
 |
 +-- MyCustomFontBold.ttf
 +-- MyCustomFontBoldItalic.ttf
 +-- MyCustomFontItalic.ttf
 +-- MyCustomFontRegular.ttf

在文件src\theme\variables.scss中定义字体：

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}

在同一文件src\theme\variables.scss中，编辑:root元素以将自定义字体定义为Ionic应用程序的字体：
```
--ion-font-family: 'My Custom Font';
```

Answer 2

您似乎对Ionic 4 / Angular感兴趣。

我刚刚在Ionic 4.0.0 Beta中使用模板“空白”创建了一个测试应用程序。这是我放入variable.sccs中以更改跨平台所有字体的内容：

: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而言，尚未记录字体的主题。稍后可能会澄清，或者最终可能会改变行为。请记住这一点。

Answer 3

在目录文件夹src\assets\fonts中添加自定义字体
在文件src\theme\variables.scss的：root之前

@ font-face {font-family：“自定义字体”； src： url（“ ../ assets / fonts / Custom Font.xxx”）; }

在：root

-ion-font-family：“自定义字体”；

Answer 4

在“资产”目录中添加字体

在文件“ variables.cscc”中写

@font-face {
  font-family: 'custom';
  src: url('../assets/fonts/custom.ttf');
}
.text-custom{ 
  font-family: "custom"; 
}

然后在您的xx.page.html中写

<span class="text-custom">you text</span>

致谢

Answer 5

这对我有用

确保提供当前字体文件夹的路径和文件名

Answer 6

1。将ttf字体文件包含在src / assets / fonts /文件夹中。

2。现在通过将字体家族包含在global.scss（src / global.scss）中来创建它例如：@font-face { font-family: 'CustomfontName'; src: url('./assets/fonts/CustomFont.ttf'); }

3。应用样式

<ion-content>
  <div style='font-family:CustomfontName'>
      Sample text for custom font
  </div>
</ion-content>

为更好地理解，请单击以下链接，

https://www.youtube.com/watch?v=Hz7SLdGG8HA

Answer 7

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

这里是一个示例：

<!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>

如何在Ionic 4中安装新字体？

7 个答案: