当前位置: 首页 > 工具软件 > Font Custom > 使用案例 >

在ReactNative项目中使用google font或者custom font

巫马曜文
2023-12-01

具体:https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app

或者:https://github.com/refinery29/react-native-cheat-sheet

我的步骤:

1。前往https://github.com/google/fonts下载自己需要的字体。

2.在和ios目录同级的目录下增加assets目录,进入assets,增加fonts目录,进入fonts目录,增加对应字体名称目录,然后将下载的字体全部拖到该目录下,eg:将EaterCaps-Regular.ttf拖进EaterCaps目录中

3.打开package.json,添加如下代码://最后一个不用逗号隔开。

"rnpm": {
"assets": ["assets/fonts/TittiliumWeb"]
}

4.控制台运行

react-native link

5.打开ios工程,clear项目后,run项目。

ps:可以在Appdelegate.m文件中打印字体:NSLog (@"Font families: %@", [UIFont familyNames]);

使用:

const styles = StyleSheet.create({
customFont: {
fontFamily: 'Tittilium Web',
fontWeight: 'bold',
fontStyle: 'italic'
}
});

...

<Text style={styles.customFont}>My awesome font</Text>; 

字体文件:MyriadPro-Bold.otf

使用:

     fontFamily: 'MyriadPro-Bold',

otf后缀的也可以:

   fontFamily: 'Myriad Pro',
     fontWeight: 'bold',


 类似资料: