Question

我刚刚将自定义字体添加到我的react-native app（https://fonts.google.com/specimen/Josefin+Sans）。

JosefinSans-Bold.ttf
JosefinSans-BoldItalic.ttf
JosefinSans-Italic.ttf
JosefinSans-Light.ttf
JosefinSans-LightItalic.ttf
JosefinSans-Regular.ttf
JosefinSans-SemiBold.ttf
JosefinSans-SemiBoldItalic.ttf
JosefinSans-Thin.ttf
JosefinSans-ThinItalic.ttf

我在添加

后运行react-native link来链接字体文件

"rnpm": {
  "assets": [
    "path/to/my/font/files"
  ]
},

到我的package.json

然后我在我的应用程序中使用这样的字体：

customFont: {
    fontFamily: 'Josefin Sans',
},
thin: {
    fontWeight: '100'
},
light: {
    fontWeight: '300'
},
semiBold: {
    fontWeight: '600'
},
bold: {
    fontWeight: '700'
},
italic: {
    fontStyle: 'italic'
},

iOS simulator screenshot of the different fontWeight and fontStyle

问题在于thin(fontWeight: '100')和{}之间没有区别。 light(fontWeight: '300')。

到目前为止我已尝试过：

尝试使用谷歌字体中的另一种字体（同样的问题）。
尝试在实际设备（而不是模拟器）上运行应用程序，但徒劳无功。
尝试使用iOS默认字体和那些fontWeights：thin和light可以识别
在xcode中显示字体实际名称（JosefinSans-Light和JosefinSans-Thin）：

_

for (NSString* family in [UIFont familyNames])
{
  NSLog(@"%@", family);
  for (NSString* name in [UIFont fontNamesForFamilyName: family])
  { NSLog(@"  %@", name); }
}

有没有人有同样的问题？关于如何修复它并显示实际的轻薄字体重量的任何想法？

非常感谢

Answer 1

我认为在自定义字体方面，您必须为每个重量使用不同的fontFamily样式。

所以在这种情况下，你会想要你的风格这样的东西（名字可能略有偏差，但你明白了）：

customFont: {
    fontFamily: 'Josefin Sans'
},
thin: {
    fontFamily: 'Josefin Sans-Thin'
},
light: {
    fontFamily: 'Josefin Sans-Light'
},
semiBold: {
    fontFamily: 'Josefin Sans-SemiBold'
},
bold: {
    fontFamily: 'Josefin Sans-Bold'
},
italic: {
    fontFamily: 'Josefin Sans-Italic'
}

...

当然，您可以随意添加其他款式。此外，根据这一点，您可能希望将customFont更改为regular。

Thin＆amp; amp;在我的react-native应用程序中添加自定义字体时，在iOS上轻量级fontWeight

1 个答案: