Мастерство типографики в React Native: вес шрифтов и пользовательские шрифты

Мастерство типографики — ключ к созданию визуально привлекательных и удобных приложений React Native. Это руководство рассматривает, как эффективно управлять весом шрифта и добавлять пользовательские шрифты в ваши проекты.

Содержание

• Стилизация веса шрифта
• Включение пользовательских шрифтов

Стилизация веса шрифта

React Native предлагает простой контроль над весом шрифта с помощью свойства стиля fontWeight внутри компонента Text. Это свойство принимает числовые значения (100-900) и предопределенные ключевые слова:

• 'normal': Эквивалентно 400.
• 'bold': Эквивалентно 700.
• '100', '200', '300', '400', '500', '600', '700', '800', '900': Конкретные значения веса.

Вот пример, демонстрирующий различные веса шрифта:

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

const MyComponent = () => {
  return (
    <Text style={styles.text}>
      Это нормальный вес (400). <Text style={styles.boldText}>Это жирный (700). <Text style={styles.lightText}>Это лёгкий (300).
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
  boldText: {
    fontWeight: 'bold',
  },
  lightText: {
    fontWeight: '300',
  },
});

export default MyComponent;

Помните, что рендеринг веса шрифта зависит от выбранного семейства шрифтов. Не все шрифты поддерживают полный диапазон весов. React Native будет использовать ближайший доступный вес, если конкретный вес не поддерживается.

Включение пользовательских шрифтов

Расширение ваших дизайнерских возможностей за пределы шрифтов по умолчанию включает добавление и использование пользовательских шрифтов. Это повышает визуальную привлекательность и брендинг вашего приложения.

1. Добавление файлов шрифтов: Поместите ваши файлы шрифтов (например, .ttf, .otf) в выделенную папку в ресурсах вашего проекта (например, src/assets/fonts).
2. Регистрация шрифтов (Expo): Если вы используете Expo, воспользуйтесь expo-font:

import { useFonts } from 'expo-font';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf';

export default function App() {
  const [loaded] = useFonts({
    'MyCustomFont': require('./assets/fonts/MyCustomFont.ttf'),
  });

  if (!loaded) return null;

  return (
    <Text style={{ fontFamily: 'MyCustomFont', fontWeight: 'bold' }}>Текст пользовательского шрифта</Text>
  );
}

3. Регистрация шрифтов (без Expo): Для проектов без Expo вам может потребоваться более ручной подход (в этом примере используется заполнитель для обработки, специфичной для платформы. Отрегулируйте в соответствии с вашими потребностями.):

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // Настройте путь по мере необходимости

const App = () => {
  return (
    <Text style={styles.text}>Это использует пользовательский шрифт.</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', // Обработка разных ОС здесь.
  },
});

export default App;

4. Использование зарегистрированных шрифтов: После регистрации используйте имя семейства шрифтов в свойстве стиля fontFamily ваших компонентов Text. Убедитесь, что имя соответствует имени файла шрифта, используемого во время регистрации.

Сочетая вес шрифта и методы работы с пользовательскими шрифтами, вы достигаете точного типографического контроля в ваших приложениях React Native, что приводит к улучшенной визуальной согласованности и более профессиональному пользовательскому опыту. Помните о тщательном кросс-платформенном тестировании для обеспечения согласованного рендеринга.