字体问题？使用React Native，这个问题终结了

2024-01-19 14:56:06

想把 App 的字体搞成和 App 设计图一毛一样，却总是失败？

首先，我们得理解导致这个问题的原理，也就是本文的主要内容：

React Native 的字体设置
字体适配
React Native 字体常见问题
如何解决 React Native 字体问题

一、React Native 的字体设置

React Native 提供了一些内置字体，可以在组件中直接使用。

import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Helvetica',
    fontSize: 16,
    color: 'black',
  },
});

const App = () => {
  return (
    <View>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
};

export default App;

fontFamily：指定字体系列。
fontSize：指定字体大小。
color：指定字体颜色。

除了内置字体，你还可以使用自定义字体。首先，你需要将自定义字体文件添加到你的项目中。然后，你可以在组件中使用 require() 函数加载自定义字体。

import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: require('./fonts/CustomFont.ttf'),
    fontSize: 16,
    color: 'black',
  },
});

const App = () => {
  return (
    <View>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
};

export default App;

二、字体适配

在不同的设备上，字体大小可能会不同。这是因为不同设备的屏幕密度不同。为了确保字体在不同设备上看起来大小一致，你需要使用字体适配。

import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'black',
  },
});

const App = () => {
  const { scale } = PixelRatio;

  return (
    <View>
      <Text style={[styles.text, { fontSize: 16 * scale }]}>Hello, world!</Text>
    </View>
  );
};

export default App;