将自定义字体添加到我的react-native应用时，iOS上的Thin＆Light fontWeight没有区别

我刚添加了自定义字体到我的react-native应用（https://fonts.google.com/specimen/Josefin+Sans）。将自定义字体添加到我的react-native应用时，iOS上的Thin＆Light fontWeight没有区别

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); } 
}

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

非常感谢

来源

2017-02-25 guitoof

我相信你必须使用一个不同的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。

来源

2017-02-25 18:16:21 TheJizel

嗨TheJizel，谢谢你的回答！实际上，对于大多数权重，它似乎与fontWeight属性一起使用。例如，'fontWeight：'600'与'fontFamily：Josefin Sans-SemiBold'呈现相同，'fontWeight：'900'呈现与'fontFamily：Josefin Sans-Black'相同。但是，我仍然没有看到'Josefin Sans-Thin'和'Josefin Sans-Light'之间的区别:( – guitoof

@guitoof你可以尝试改变字体名称，以便不存在空格（例如'JosefinSans-Thin '）？当我使用Open Sans时，这是我的问题。 – TheJizel

TheJizel谢谢。是的，我也尝试过，但我明白重要的是，在Android上，fontFamily前缀应该与文件的名称匹配。因此，如果我的文件名为'Josefin Sans_bold.ttf'，我使用'fontFamily：Josefin Sans_bold'。所以在这里没有运气...... :( – guitoof

将自定义字体添加到我的react-native应用时，iOS上的Thin＆Light fontWeight没有区别

回答

相关问题