css - Ionic Angular 自定义字体未开始加载
问题描述
问题
无论我做什么，都无法让 iOS 模拟器加载自定义字体。
我已经测试了我在不同 Ionic 版本和所有平台上找到的所有内容，当前设置在 , 和中完美运行，但在,Google Chrome Browser中运行良好Safari Browser，但在 中运行良好（由于我还没有，因此无法在其中进行测试）。Android DeviceAndroid EmulatoriOS SimulatoriOS Device
预期行为
当前行为
除非注释其字体样式（第二张图片），否则不会显示自定义字体相关组件。
代码
- Angular-Ionic 强制
global.scss（重复样式只是为了测试它是否仅从某些来源正确加载）
// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';
@import '~animate.css/animate.min';
@font-face {
font-family: "Gotham";
src: local('GothamMedium'), local('GothamMedium'),
url('assets/GothamMedium.eot') format('embedded-opentype'),
url('assets/GothamMedium.woff2') format('woff2'),
url('assets/GothamMedium.woff') format('woff'),
url('assets/GothamMedium.ttf') format('truetype'),
url('assets/GothamMedium.svg#GothamMedium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Gotham";
src: local('GothamBold'), local('GothamBold'),
url('assets/GothamBold.eot') format('embedded-opentype'),
url('assets/GothamBold.woff2') format('woff2'),
url('assets/GothamBold.woff') format('woff'),
url('assets/GothamBold.ttf') format('truetype'),
url('assets/GothamBold.svg#GothamBold') format('svg');
font-weight: bold;
font-style: normal;
}
@mixin font($weight, $size: false, $shadow: false, $align: false) {
font-family: "Gotham" !important;
font-weight: $weight;
@if $weight==regular {
@if $shadow {
text-shadow: 1px 1px 1px #aaaa;
}
}
@if $weight==bold {
@if $shadow {
text-shadow: 1px 2px 4px #aaaa;
}
}
@if $size {
font-size: $size !important;
}
@if $align {
text-align: $align !important;
}
}
//...
/*:root[mode=ios] .gotham,
:root[mode=md] .gotham{
--ion-font-family: 'Gotham' !important;
font-family: 'Gotham' !important;
}*/
}
.subtitulo {
@include font(normal, 3.5vw, false, center);
margin: auto !important;
}
ion-card-title,
h1 {
top: -10px;
@include font(bold, 9vw, true);
color: var(--ion-color-primary);
}
- 离子强制主题
variables.scss
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
// --ion-font-family: "GothamMedium", "Roboto";
// font-family: var(--ion-font-family) !important;
--ion-font-family: 'Gotham' !important;
font-family: 'Gotham' !important;
//... other non-related theming variables
}
- 离子建议（如果代码块正常运行，
fonts.scss我将弃用它，或者相反）。globals.scss我确实mixins用来使造型更快。
@font-face {
font-family: "Gotham";
src: local('GothamMedium'), local('GothamMedium'),
url('../assets/GothamMedium.eot') format('embedded-opentype'),
url('../assets/GothamMedium.woff2') format('woff2'),
url('../assets/GothamMedium.woff') format('woff'),
url('../assets/GothamMedium.ttf') format('truetype'),
url('../assets/GothamMedium.svg#GothamMedium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Gotham";
src: local('GothamBold'), local('GothamBold'),
url('../assets/GothamBold.eot') format('embedded-opentype'),
url('../assets/GothamBold.woff2') format('woff2'),
url('../assets/GothamBold.woff') format('woff'),
url('../assets/GothamBold.ttf') format('truetype'),
url('../assets/GothamBold.svg#GothamBold') format('svg');
font-weight: bold;
font-style: normal;
}
@mixin font($weight, $size: false, $shadow: false, $align: false) {
font-family: "Gotham" !important;
font-weight: $weight;
@if $weight==regular {
@if $shadow {
text-shadow: 1px 1px 1px #aaaa;
}
}
@if $weight==bold {
@if $shadow {
text-shadow: 1px 2px 4px #aaaa;
}
}
@if $size {
font-size: $size !important;
}
@if $align {
text-align: $align !important;
}
}
配置
angular.json
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "assets/"
},
{
"glob": "**/*.woff2",
"input": "src/assets/",
"output": "assets/"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/fonts.scss"
},
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
//...
package.json
{
"name": "app",
"version": "0.1.0",
"author": "",
"homepage": "",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"android:dev": "ionic cordova run android --external --debug",
"android:prod": "ionic cordova run android -l --ssl --external --prod",
"ios:dev": "ionic cordova run ios --prod",
"ios:prod": "ionic cordova run ios -l --ssl --external --prod",
},
"private": true,
"dependencies": {
"@angular/common": "^10.1.5",
"@angular/core": "^10.1.5",
"@angular/forms": "^10.1.5",
"@angular/platform-browser": "^10.1.5",
"@angular/platform-browser-dynamic": "^10.1.5",
"@angular/router": "^10.1.5",
"@ionic-native/bluetooth-serial": "^5.28.0",
"@ionic-native/core": "5.22.0",
"@ionic-native/device": "^5.28.0",
"@ionic-native/diagnostic": "^5.28.0",
"@ionic-native/firebase-x": "^5.26.0",
"@ionic-native/in-app-browser": "^5.26.0",
"@ionic-native/native-storage": "^5.26.0",
"@ionic-native/splash-screen": "5.22.0",
"@ionic-native/status-bar": "^5.22.0",
"@ionic/angular": "^5.0.4",
"@ionic/storage": "^2.2.0",
"@keyframes/core": "^2.0.10",
"@teamhive/lottie-player": "^1.0.0",
"animate.css": "^3.7.2",
"cordova": "^10.0.0",
"cordova-android-firebase-gradle-release": "^4.0.0",
"cordova-plugin-bluetooth-serial": "^0.4.7",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-enable-multidex": "^0.2.0",
"cordova-plugin-inappbrowser": "^4.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^3.6.4",
"firebase": "^7.14.5",
"howler": "^2.1.3",
"keyframes": "^2.3.0",
"lodash": "^4.17.19",
"native-run": "^1.0.0",
"ng-payment-card": "0.0.8",
"npm-check-updates": "^4.0.4",
"rxjs": "^6.5.4",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "^0.900.5",
"@angular-devkit/build-angular": "^0.1001.6",
"@angular-devkit/core": "^10.1.6",
"@angular-devkit/schematics": "^10.1.6",
"@angular/cli": "^10.1.6",
"@angular/compiler": "^10.1.5",
"@angular/compiler-cli": "^10.1.5",
"@angular/language-service": "^10.1.5",
"@ionic/angular-toolkit": "^2.2.0",
"@ionic/lab": "^3.1.6",
"@types/jasmine": "^3.5.8",
"@types/jasminewd2": "^2.0.8",
"@types/lodash": "^4.14.149",
"@types/node": "^13.7.7",
"codelyzer": "^5.2.1",
"cordova-android": "^9.0.0",
"cordova-ios": "^6.1.1",
"cordova-plugin-androidx": "^2.0.0",
"cordova-plugin-androidx-adapter": "^1.1.1",
"cordova-plugin-firebasex": "10.2.0-cli",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "^3.1.1",
"karma-jasmine-html-reporter": "^1.5.2",
"protractor": "^5.4.3",
"ts-node": "^8.6.2",
"tslint": "~6.1.0",
"typescript": "^4.0.3"
},
"description": "Crucijuegos Salas App",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-background-mode": {},
"cordova-plugin-nativestorage": {},
"cordova-android-firebase-gradle-release": {
"FIREBASE-CORE": "17.0.0",
"FIREBASE-ADS": "18.0.0",
"FIREBASE-ANALYTICS": "17.0.0",
"FIREBASE-APPINDEXING": "19.0.0",
"FIREBASE-AUTH": "18.0.0",
"FIREBASE-FIRESTORE": "20.0.0",
"FIREBASE-FUNCTIONS": "18.0.0",
"FIREBASE-MESSAGING": "19.0.0",
"FIREBASE-STORAGE": "18.0.0",
"FIREBASE-CRASH": "16.2.1",
"CRASHLYTICS": "2.10.1",
"FIREBASE-DYNAMIC-LINKS": "18.0.0",
"FIREBASE-INVITES": "17.0.0",
"FIREBASE-INAPPMESSAGING": "18.0.1",
"FIREBASE-INAPPMESSAGING-DISPLAY": "18.0.1",
"FIREBASE-ML-VISION": "21.0.0",
"FIREBASE-ML-VISION-IMAGE-LABEL-MODEL": "18.0.0",
"FIREBASE-ML-VISION-FACE-MODEL": "18.0.0",
"FIREBASE-ML-VISION-OBJECT-DETECTION-MODEL": "17.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-LANGUAGE-ID-MODEL": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-TRANSLATE-MODEL": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-SMART-REPLY-MODEL": "20.0.0",
"FIREBASE-ML-MODEL-INTERPRETER": "20.0.0",
"FIREBASE-ML-VISION-AUTOML": "17.0.0",
"FIREBASE-PERF": "18.0.0",
"FIREBASE-DATABASE": "18.0.0",
"FIREBASE-CONFIG": "18.0.0"
},
"cordova-plugin-enable-multidex": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-ble-central": {
"BLUETOOTH_USAGE_DESCRIPTION": " "
},
"cordova-plugin-bluetooth-serial": {},
"cordova-plugin-firebasex": {
"FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
"FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
"FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true"
}
},
"platforms": [
"ios",
"android"
]
}
}
环境
- Mac开发站
74-80-245-21:cruci-app user922954$ ionic info
Ionic:
Ionic CLI : 6.11.12 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.3
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics : 9.1.12
@angular/cli : 9.1.12
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)
Utility:
cordova-res : 0.15.1
native-run (update available: 1.2.2) : 1.1.0
System:
ios-sim : 8.0.2
NodeJS : v12.16.2 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
Xcode : Xcode 12.0.1 Build version 12A7300
- Linux开发站（供参考）
⟩ ionic info
Ionic:
Ionic CLI : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.3
@angular-devkit/build-angular : 0.1001.6
@angular-devkit/schematics : 10.1.6
@angular/cli : 10.1.6
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 1.2.2) : 1.1.0
System:
Android SDK Tools : 26.1.1 (/home/praetors/Android/Sdk/)
NodeJS : v12.13.0 (/home/praetors/.nvm/versions/node/v12.13.0/bin/node)
npm : 6.12.0
OS : Linux 4.19
解决方案
推荐阅读
- mysql - MySQL中的嵌套级别
- c# - 我想创建一个简单的 dotnet(vb.net 或 c#.net) 类
- typescript - Vuetify Jest Unknown 自定义元素
- active-directory - LDAP 中的域名和 DC
- excel - 如何将 TFS Shelveset 评论导出为文本或 Excel
- reactjs - 使用反应传单实现传单响应弹出插件
- arrays - 如何在python中创建一个二维数组
- pdf - 在Firefox中查看pdf文件时如何启用暗模式
- python - 什么是分组和形成字符串排序列表的有效方法
- regex - 如果下一个单元格包含某些文本，如何进行数据验证以仅接受整数