热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在Ionic4中安装新字体?

如何解决《如何在Ionic4中安装新字体?》经验,为你挑选了2个好方法。

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

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

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

Strider.. 36

这就是我设法为我的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';



1> Strider..:

这就是我设法为我的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');
}


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而言,尚未记录字体的主题.稍后可能会澄清,或者行为可能会在最终中发生变化.记住这一点.


推荐阅读
author-avatar
乐橙味_367
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有