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

Question

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Str*_*der 36

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

--ion-font-family: 'My Custom Font';

Run Code Online (Sandbox Code Playgroud)

如果您不想添加字体文件，您可以从网络上获取字体定义，例如 https://fonts.googleapis.com/css?family=Roboto+Condensed 并将内容从 url 复制到 variables.scss到包裹 (6认同)

Answer 2

小智 8

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

@font-face { 字体系列：“自定义字体”；src: url("../assets/fonts/Custom Font.xxx"); }

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

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

Answer 3

小智 7

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 6

你似乎对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;
}

Run Code Online (Sandbox Code Playgroud)

在我的Mac上,我看到了"Palatino".

关键是,使用"!important".就Beta而言,尚未记录字体的主题.稍后可能会澄清,或者行为可能会在最终中发生变化.记住这一点.

Answer 5

小智 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，2 月前
查看次数：	13427 次
最近记录：	6 年，4 月前