React-Native项目 — 自定义字体的使用

系列文章目录

1. React-Native环境搭建（IOS）
2. React-Native项目 — 关于IOS知识储备
3. React-Native项目工程搭建（开发模板搭建）
4. React-Native项目矢量图标库（react-native-vector-icons）
5. 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