Question

我正在构建具有代码共享（TNS Code Sharing）的Nativescript Angular应用。尝试应用Roboto Regular字体，但似乎不起作用。我已经看到有很多关于iOS和自定义字体的问题，但是没有给出的答案可以解决我的问题，所以我想这与我使用@ nativescript / schematics（代码共享）有关。）设置。

如果我使用文件名而不是字体名，那么它在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

我知道了。

当您使用ng new --collection=@nativescript/schematics my-shared-app --shared使用nativescript-schematics（移动和Web代码共享）创建项目时，文件夹结构与标准nativescript应用程序中的文件夹结构没有什么不同。在nativescript应用中，您在根目录中有app/，在这里您得到src/app/。在这种情况下，在src/app/fonts/中放置自定义字体仅适用于Android，不适用于iOS。当我将它们移至src/fonts/时，iOS也会将它们拾取。不确定这是否现在也可以在Android上使用，将它们加倍或符号链接会很愚蠢，但是我将在Android上对其进行测试后立即进行检查。

谢谢。

Answer 2

Roboto不是标准的iOS字体，因此，如果fonts/目录中未包含Roboto字体，则iOS上将不可用。

要确定iPhone上可用的字体（以及应使用的字体名称），请参阅this answer，以解决另一个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);
}

Answer 3

字体的脚本名称似乎是and ActStartDate BETWEEN '{{start}}' AND '{{stop}}'，所以尝试一下，

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

似乎您的文件位置是：src/app/fonts/Roboto-Regular.ttf

app.css 字体家族应与文件名相同：

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

像这样在html文件中添加类

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

Nativescript / Angular：自定义字体未在iOS中应用

5 个答案: