Nativescript / Angular: пользовательские шрифты не применяются в iOS

Question

Я создаю приложение Nativescript Angular с совместным использованием кода ( TNS Code Sharing ).Пытаюсь применить шрифт Roboto Regular, но кажется, что он не работает.Я видел, что существует множество вопросов о iOS и пользовательских шрифтах, но ни один из приведенных ответов не решает мою проблему, поэтому я предполагаю, что это как-то связано с тем, что я использую @ nativescript / schematics (совместное использование кода)) setup.

Если я использую имя файла вместо имени шрифта, он отлично работает на Android, но, что бы я ни указывал в качестве семейства шрифтов, он никогда не работает на iOS.

Спасибо, ребята.

Вот код:

Расположение файла шрифта: src/app/fonts/Roboto-Regular.ttf

src / _app-common.scss

.roboto {
  font-family: 'Roboto Regular';
}

src / app / pages /my / my.component.tns.html

<Label [nsRouterLink]="['/about']" text="About" class="h1 text-center roboto" textWrap="true"></Label>

package.json

{
      "name": "appname",
      "nativescript": {
        "id": "no.app.id",
        "tns-android": {
          "version": "4.2.0"
        },
        "tns-ios": {
          "version": "4.2.0"
        }
      },
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "android": "tns run android --bundle",
        "ios": "tns run ios --bundle"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~6.1.0",
        "@angular/common": "~6.1.0",
        "@angular/compiler": "~6.1.0",
        "@angular/core": "~6.1.0",
        "@angular/forms": "~6.1.0",
        "@angular/http": "~6.1.0",
        "@angular/platform-browser": "~6.1.0",
        "@angular/platform-browser-dynamic": "~6.1.0",
        "@angular/router": "~6.1.0",
        "core-js": "^2.5.4",
        "nativescript-angular": "~6.1.0",
        "nativescript-theme-core": "~1.0.4",
        "normalize.css": "^8.0.0",
        "reflect-metadata": "~0.1.8",
        "rxjs": "^6.0.0",
        "tns-core-modules": "~4.2.0",
        "zone.js": "^0.8.26"
      },
      "devDependencies": {
        "@angular/cli": "^6.2.0",
        "@angular/compiler-cli": "~6.0.3",
        "@angular-devkit/build-angular": "^0.8.0",
        "@nativescript/schematics": "~0.3.0",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "nativescript-dev-typescript": "~0.7.0",
        "nativescript-dev-webpack": "^0.16.0",
        "protractor": "~5.3.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2",
        "nativescript-dev-sass": "~1.6.0"
      }
    }

Answer 1

Я понял это.

Когда вы создаете свой проект с nativescript-схемами (совместное использование мобильного и веб-кода) с ng new --collection=@nativescript/schematics my-shared-app --shared, структура папок немного отличается от структуры стандартного приложения nativescript.В приложении nativescript у вас есть app/ внутри корня, и здесь вы получаете src/app/.В этом случае размещение пользовательских шрифтов в src/app/fonts/ работало для Android, но не для iOS.Когда я переместил их в src/fonts/, iOS тоже их поднял.Не уверен, что теперь это работает и на Android, было бы глупо дублировать их или создавать символические ссылки, но я проверю это, как только протестирую на Android.

Спасибо всем.

Answer 2

кажется, что ваше местоположение файла: src/app/fonts/Roboto-Regular.ttf

app.css семейство шрифтов должно совпадать с именем файла :

.roboto {
  font-family: 'Roboto-Regular';
}

добавить класс в htmlтакой файл

<Label text="About" class="roboto" ></Label>

Answer 3

Имя постскриптума шрифта выглядит как Roboto-Regular, поэтому попробуйте это,

.roboto {
  font-family: 'Roboto-Regular';
}

Answer 4

Возможно, вам потребуется зарегистрировать шрифт в вашем main.ts событии запуска

app.on(app.launchEvent, function (args: app.ApplicationEventData) {
    ...
    if (isIOS) {
      var fontModule = require("ui/styling/font");
      fontModule.ios.registerFont("Roboto-Regular.ttf");
    }
});

Answer 5

Roboto не является стандартным шрифтом iOS, поэтому, если вы не включили шрифт Roboto в каталог fonts/, он не будет доступен на iOS.

Чтобы определить, какие шрифты доступны наваш iPhone (и какие имена вам следует адресовать), см. этот ответ на другой вопрос StackOverflow (соответствующий источник скопирован ниже).

NSArray *fontFamilies = [UIFont familyNames];

for (int i = 0; i < [fontFamilies count]; i++)
{
    NSString *fontFamily = [fontFamilies objectAtIndex:i];
    NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
    NSLog (@"%@: %@", fontFamily, fontNames);
}