作者:乐橙味_367 | 来源:互联网 | 2022-12-08 12:09
有谁知道如何更新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而言,尚未记录字体的主题.稍后可能会澄清,或者行为可能会在最终中发生变化.记住这一点.