Ionic自定义字体

Question

问候，我向您提出了一个关于字体的问题。

编辑：此应用程序适用于Ionic和Angular中的移动设备(ios，android(。

我想在应用程序中使用Poppins字体。当在PC上运行时，在谷歌Chrome等浏览器中的窗口。。。所以一切都很完美。

但当我尝试在Mac、iPhone模拟器或真正的设备iPhone 11上运行该应用程序时。根本不会加载字体。

有人能就我的错误或我做错了什么向我提出建议吗。我周围没有人遇到过类似的情况。

我将在导入字体及其后续使用时附加代码。

fonts.scss

/* poppins-300 - latin */
@font-face {
font-family: 'Poppins-light';
font-style: normal;
font-weight: 300;
src: url('../assets/fonts/poppins-v15-latin-300.eot'); /* IE9 Compat Modes */
src: local(''), url('../assets/fonts/poppins-v15-latin-300.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('../assets/fonts/poppins-v15-latin-300.woff2') format('woff2'),
/* Super Modern Browsers */ url('../assets/fonts/poppins-v15-latin-300.woff') format('woff'),
/* Modern Browsers */ url('../assets/fonts/poppins-v15-latin-300.ttf') format('truetype'),
/* Safari, Android, iOS */ url('../assets/fonts/poppins-v15-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
font-family: 'Poppins-medium';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''), url('../assets/fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('../assets/fonts/poppins-v15-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */ url('../assets/fonts/poppins-v15-latin-regular.woff') format('woff'),
/* Modern Browsers */ url('../assets/fonts/poppins-v15-latin-regular.ttf') format('truetype'),
/* Safari, Android, iOS */ url('../assets/fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-italic - latin */
@font-face {
font-family: 'Poppins-italic';
font-style: italic;
font-weight: 400;
src: url('../assets/fonts/poppins-v15-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''), url('../assets/fonts/poppins-v15-latin-italic.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */ url('../assets/fonts/poppins-v15-latin-italic.woff2') format('woff2'),
/* Super Modern Browsers */ url('../assets/fonts/poppins-v15-latin-italic.woff') format('woff'),
/* Modern Browsers */ url('../assets/fonts/poppins-v15-latin-italic.ttf') format('truetype'),
/* Safari, Android, iOS */ url('../assets/fonts/poppins-v15-latin-italic.svg#Poppins') format('svg'); /* Legacy iOS */
}

global.scss-用于创建具有自定义字体的类

.font-light {
font-family: Poppins-light;
}

Answer 1

您已将其导入scss文件

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@300&display=swap');

以及如何使用这个

ion-title {
font-family: 'Poppins', sans-serif;
}