矢量字体不起作用 [英] Vector font not working

问题描述

我已经运行了 react-native start 和 react-native run-ios.所以我的应用正在运行.

我将 ios-glyphs.ttf 放入根目录中名为 fonts 的文件夹中.所以./fonts.然后我将这个添加到 package.json 中:

 "rnpm": {资产":[字体"]

}

然后我运行了 react-native link.

在那之后，我在我的应用程序中添加了一个 rende:

 <Text style={{fontFamily:'ios-glyphs'}}>&#xf193;</Text>

加载我的应用程序时很好，但是当我加载呈现此自定义字体的页面时，我收到无法识别的字体系列‘ios-glyphs’"，这是一个屏幕截图: - 正如教程所暗示的，字体名称实际上与文件名完全不同.

我是按照@sfratini 的说明找到真正的字体名称的.

我打开xcode，用xcode打开我项目文件夹中的ios文件夹，就像这样.

然后我将这段代码添加到 AppDelegate.m:

 NSArray *families = [[UIFont familyNames] sortedArrayUsingSelector:@selector(localizedCaseInsensitiveCompare:)];NSMutableString *fonts = [NSMutableString 字符串];for (int i = 0; i <[家庭数]; i++) {[fonts appendString:[NSString stringWithFormat:@"\n%@:\n", family[i]]];NSArray *names = [UIFont fontNamesForFamilyName:families[i]];for (int j = 0; j <[名称计数]; j++) {[fonts appendString:[NSString stringWithFormat:@"\t%@\n", names[j]]];}}NSLog(@"%@", 字体);

然后在控制台日志中找到了新的图标名称.

我的项目文件夹:

使用 xcode 打开:

单击文件夹，然后将代码添加到 AppDelegate.m 中，然后保存并运行 react-native run-ios 或按下播放"按钮，如下面的屏幕截图所示(您需要重新编译，我怀疑热重载是否有效，但我没有测试):

然后在控制台日志中吐出完整的字体名称列表:

我在链接之前做了字体，然后在链接之后，做了一个差异来找到我的字体名称.

I already had run react-native start and then react-native run-ios. So my app is running.

I placed ios-glyphs.ttf into a folder called fonts in my root directory. So ./fonts. I then added to package.json this:

 "rnpm": {
    "assets": [
      "fonts"
    ]

}

I then ran react-native link.

After that in my app I added in a rende:

 <Text style={{fontFamily:'ios-glyphs'}}>&#xf193;</Text>

On load of my app it is fine, but when i load the page that renders this custom font I get "Unrecognized font family 'ios-glyphs'", here is a screenshot: http://i.imgur.com/G6hwlor.png

The page does load after dismissing that error but the icon looks like a question mark in a box but my real icon is a star:

I then did some funky stuff. I thought I linked it wrong so I changed the folder path, and moved font to new folder and linked again. Then I went into xcode and saw two of them in "Resources" so I deleted the first one as that folder was no longer there.

Does anyone know how to fix this error? Should I throw discard this commit? Will it make it like I never linked anything? I'm worried I might have screwed up my project with xcode.

解决方案

Thanks very much to @sfratini - React-Native can't resolve module for fonts - the font name was actually totally different then file name, as hinted by the tutorial.

How I found the real font name was by following @sfratini's instructions.

I opened up xcode, and opened the ios folder in my project folder with xcode, like this.

I then added to AppDelegate.m this code:

  NSArray *families = [[UIFont familyNames] sortedArrayUsingSelector:@selector(localizedCaseInsensitiveCompare:)];
  NSMutableString *fonts = [NSMutableString string];
  for (int i = 0; i < [families count]; i++) {
    [fonts appendString:[NSString stringWithFormat:@"\n%@:\n", families[i]]];
    NSArray *names = [UIFont fontNamesForFamilyName:families[i]];
    for (int j = 0; j < [names count]; j++) {
      [fonts appendString:[NSString stringWithFormat:@"\t%@\n", names[j]]];
    }
  }
  NSLog(@"%@", fonts);

Then found the new icon name in the console log.

My project folder:

Open with xcode:

Click on the folders, then add to AppDelegate.m the code then save and either run react-native run-ios or press "Play" button as in screenshot below (You need to recompile, I doubt hot reloading will work but I didn't test):

Then a full list of font names get spit out in the console log:

I did the fonts before linking, then after linking, and did a diff to find my font names.

这篇关于矢量字体不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！