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

2wnc66cl 于 12个月前发布在 Ionic

关注(0)|答案(9)|浏览(145)

有人知道如何更新Ionic 4的字体吗？
我尝试将aileron.woff添加到assets/fonts中，并将其放入variables.scss中，但无济于事。

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

字符串

ionic-framework

来源：https://stackoverflow.com/questions/51755047/how-do-i-install-new-fonts-in-ionic-4

9条答案

按热度按时间

vatpfxk51#

这就是我如何设法添加自定义字体到我的离子应用程序
1.将包含字体文件的目录添加到文件夹src\assets\fonts下的项目中

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

字符串
1.在文件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');
}

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

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

型

赞(0）回复(0）举报 12个月前

yc0p9oo02#

1.在目录文件夹src\assets\fonts中添加自定义字体
1.在文件src\theme\variables.scss之前定义字体：root
@font-face { font-family：“自定义字体”; src：url（“../assets/fonts/Custom Font.xxx“）; }
1.定义您的自定义字体in：root
--ion-font-family：“自定义字体”;

赞(0）回复(0）举报 12个月前

5jdjgkvh3#

你似乎对Ionic 4 / Angular感兴趣。
我刚刚在Ionic 4.0.0 beta中创建了一个模板为“blank”的测试应用程序。下面是我在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版而言，字体主题还没有文档化。它可能会在以后澄清，或者行为可能会在最终版本中发生变化。请记住这一点。

赞(0）回复(0）举报 12个月前

zdwk9cvp4#

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

型

赞(0）回复(0）举报 12个月前

of1yzvn45#

的数据
这是我的工作

确保您给予当前字体文件夹路径和文件名 *

赞(0）回复(0）举报 12个月前

pgx2nnw86#

您需要使用CSS 4变量--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/[email protected]/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/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）回复(0）举报 12个月前

okxuctiv7#

1.将font ttf文件包含在src/assets/fonts/文件夹中。
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

赞(0）回复(0）举报 12个月前

envsm3lx8#

在global.scss文件中

@font-face {
  font-family: 'quicksand';    //This is what we are going to call
  src: url('./assets/font/Quicksand-Bold_df5ccd3628ec30ca750b7a6c1f1d6dac.ttf');
}

.mobile-heading {
  font-family: "quicksand";
}

字符串
在HTML文件中，

<h1 class="mobile-heading">quicksand Font apply</h1>

型

赞(0）回复(0）举报 12个月前

7gs2gvoe9#

查找您最喜欢的字体：https://fonts.google.com/

下载文件.woff2示例：lato_font.woff2
在assets目录assets/fonts中创建一个新文件夹
在文件夹/fonts中添加文件lato_font.woff2
然后在themes文件夹中查找.scss文件：theme/Variables.scss

在root: { }行之前添加
范例：

@font-face {
  font-family: 'Lato', sans-serif;
  src: url('../assets/fonts/lato_font.woff2') format('woff2');
}

.......

root:{
---  --- 
}

字符串
在root: {}内部添加

root: { 

--ion-font-family: "'Lato', sans-serif;"; }

型

赞(0）回复(0）举报 12个月前

我来回答

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

9条答案

相关问题

热门标签

最新问答