系列文章目录
- React-Native环境搭建(IOS)
- React-Native项目 — 关于IOS知识储备
- React-Native项目工程搭建(开发模板搭建)
- React-Native项目矢量图标库(react-native-vector-icons)
- React-Native项目 — 自定义字体的使用
目录
前言
在实际的移动端项目开发中,原生安卓和Ios自带的字体,虽然足够工整、耐看、适配大多数的场景。
但是在一些特殊场合下,那些规范的字体,可能不太适合我们的app设计,而且,通常情况下,设计师的设计元素里面,本身也包含了一些第三方的特殊字体的使用,这就使得我们的项目中,有足够的能力,支持第三方的字体使用。
一、自定义字体是什么
计算机中,针对全世界的语言符号,进行了一次标准的排序,每一个专门的文字符号,都有对应的一个字符编码,我们汉语也是一样,每一个单独的汉字,都有其特定的编码。
每一种字体,就是需要设计这些编码,所对应的文字符号长什么样。而我们的浏览器中,移动端app中,都会有自己的默认字体,这就是我们能够正常的打字的原因。
第三方的自定义字体,就是把这些编码,重新规划了一套自己所设计的风格,每一个字符编码,都对应一个自定义风格的字体设计,这就是我们的三方字体的基本原理。
二、自定义字体如何使用
1、必须先有一个字体文件
每一套自定义字体,归根到底都会是一个字体文件,一般常用的字体文件以.ttf为文件后缀。
这个字体文件,里面存放的就是一个个字体编码,以及对应的字体符号的一个映射表。
一般而言,我们都会从设计师那里,拿到这个字体文件。
2、定义公共asset目录
一般在 RN 项目的 /assets/fonts 目录里面,把获取到的字体文件放到该目录下。
3、配置文件link规则
项目根目录下创建 react-native.config.js 文件
module.exports = {
project: {
ios: {},
android: {},
},
assets: ["./assets/fonts"],
};
4、link
执行 npx react-native link(RN 版本 < 0.69 版本)
或者,npx react-native-asset(RN 版本 >= 0.69 版本)
5、代码示范
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import commonStyles from '../../styles/common';
export default function ChatScreen() {
return (
<View style={commonStyles.center}>
<Text>ChatScreen</Text>
<Text style={styles.textStyle}>阿里妈妈刀隶体</Text>
</View>
);
}
const styles = StyleSheet.create({
textStyle: {
fontFamily: 'AlimamaDaoLiTi',
fontSize: 30,
},
});
二、自定义字体包大小优化
三方字体的引入,让我们方便的使用任何我们想要的字体特效,但是也带来了缺点,这个缺点就是每一个字体文件,都比较大,如果我们使用多个字体文件,那字体文件的大小更要成倍的增加,这对项目而言,不是一个好消息。
在我们的社区中,当然有一些解决方案,比如 font-spider进行字体文件的压缩。
1、字体文件压缩原理
字体文件之所以大,是因为它几乎枚举了我们所使用的所有字符的映射表,但是其实我们真正的使用过程中,只需要把项目中使用到的文字的映射表集成下来即可,而字体文件的压缩,本质上也是这样的一个原理,把使用到的文字的映射摘录出来,用不到的直接丢弃,这样的过程就是字体文件的压缩。
2、执行步骤
参考npm官方:
https://www.npmjs.com/package/font-spider