26

有谁知道如何更新 Ionic 4 的字体？

我尝试将 aileron.woff 添加到 assets/fonts 并将其放在 variables.scss 中无济于事。

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

7 回答 7

82

这就是我设法将自定义字体添加到我的 Ionic 应用程序的方法

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

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

  2. 在文件中定义字体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');
}

  3. 在同一个文件src\theme\variables.scss中，编辑:root元素以将您的自定义字体定义为 Ionic 应用程序的字体：

    --ion-font-family: 'My Custom Font';
于 2019-01-16T19:13:30.883 回答
8
  1. 在目录文件夹中添加自定义字体src\assets\fonts
  2. 在 :root 之前定义文件中的字体src\theme\variables.scss

@font-face { font-family: "自定义字体"; src: url("../assets/fonts/Custom Font.xxx"); }

  1. 在 :root 中定义您的自定义字体

--ion-font-family: "自定义字体";

于 2019-04-08T23:35:22.630 回答
7

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

于 2018-08-19T08:21:19.100 回答
7

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

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

然后在任何xx.page.html你可以使用这样的类：

<span class="text-custom">your text</span>
于 2019-05-16T18:44:56.537 回答
1

这对我有用

这对我有用

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

于 2020-04-23T14:22:12.593 回答
0

您需要使用 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>

于 2018-08-09T00:15:52.910 回答
0

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

2.现在通过将其包含在 global.scss(src/global.scss) EX 中来创建字体系列：@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

于 2020-01-21T07:50:51.173 回答