راهنمای استفاده از فونت های سفارشی در React Native

اصول تایپوگرافی صحیح را دنبال کنید و با یک فونت سفارشی به برنامه خود کمی شخصیت اضافه کنید.

React Native چندین سبک فونت پیش فرض را برای انتخاب در هنگام ساخت برنامه ارائه می دهد. با این حال، برای ارائه اصالت و فردیت برنامه خود که برای برجسته شدن در بازار شلوغ نیاز دارد، ممکن است گاهی نیاز به استفاده از فونت های سفارشی داشته باشید.

بیایید یاد بگیریم که چگونه از فونت های سفارشی هنگام ساخت پروژه React Native بعدی خود استفاده کنیم.

آشنایی با فرمت های فایل فونت

با React Native، می‌توانید فایل‌های فونت سفارشی را به پروژه اضافه کنید و ظاهر عناصر متنی را در برنامه‌های خود سفارشی کنید. این فونت های سفارشی در فایل های فونت با فرمت های مختلف فایل عرضه می شوند. فایل ها حاوی اطلاعات استایل رمزگذاری شده برای یک فونت خاص هستند.

رایج ترین فرمت های فایل فونتی که در توسعه موبایل React Native استفاده می کنید عبارتند از:

• فونت TrueType (TTF): این یک فرمت فایل فونت رایج است که اکثر سیستم عامل ها و برنامه ها از آن پشتیبانی می کنند. فایل های TTF نسبتا کوچک هستند و می توانند شامل کاراکترهای زیادی باشند.
• فونت OpenType (OTF): شبیه به TTF است اما می تواند دارای ویژگی های تایپوگرافی پیشرفته نیز باشد. فایل های OTF بزرگتر از فایل های TTF هستند و هر برنامه ای از آنها پشتیبانی نمی کند.
• قلم OpenType جاسازی شده (EOT): فایل های EOT فشرده شده اند و می توانند شامل اطلاعات مدیریت حقوق دیجیتال (DRM) برای جلوگیری از استفاده غیرمجاز باشند. با این حال، همه مرورگرها از EOT پشتیبانی نمی کنند و به طور کلی برای استفاده در پروژه های مدرن توصیه نمی شود.

هنگام استفاده از فونت های سفارشی در پروژه، مهم است که فرمت فایل فونتی را انتخاب کنید که نیازهای پروژه را برآورده کند. این ممکن است شامل عواملی مانند پشتیبانی از پلتفرم هدف، اندازه فایل، الزامات مجوز، و پشتیبانی از ویژگی‌های تایپوگرافی پیشرفته باشد.

وارد کردن و اعمال فایل های فونت در React Native

می‌توانید یک فایل فونت را از هر کجای اینترنت دانلود کنید و آن را برای استفاده در پروژه شخصی React Native خود وارد کنید. با این حال، بسیاری از وب‌سایت‌های خوب و ایمن برای دانلود فونت‌های رایگان وجود دارد.

برای وارد کردن یک فایل فونت به پروژه React Native خود، یک فهرست دارایی/فونت در ریشه پروژه خود ایجاد کنید و فایل های فونت را به آن منتقل کنید.

مراحل مورد نیاز برای استفاده از فونت های سفارشی هنگام کار با یک پروژه صرفاً React Native یا یک پروژه React Native با مدیریت Expo متفاوت است.

React Native CLI

اگر با یک پروژه ایجاد شده توسط React Native CLI کار می کنید، یک فایل react-native.config.js ایجاد کنید و این تنظیمات را در آن تعریف کنید:

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: [ './assets/fonts/' ],
}

این پیکربندی به پروژه می‌گوید که دارایی‌های فونت ذخیره‌شده در فهرست راهنمای “./assets/fonts/” را شامل شود تا برنامه بتواند هنگام رندر کردن عناصر متنی به آنها دسترسی داشته باشد.

سپس می توانید پوشه دارایی ها را با اجرای موارد زیر به پروژه خود پیوند دهید:

npx react-native-asset

این فقط روی نسخه های جدیدتر برنامه های React Native از 0.69 به بالا کار می کند. پروژه های قدیمی React Native باید این دستور را به جای آن اجرا کنند:

npx react-native link

اکنون می‌توانید با فراخوانی نام دقیق آن‌ها به سبک font-family، از فونت‌های سفارشی پیوند شده، همانطور که معمولاً در استایل CSS خود استفاده می‌کنید، استفاده کنید:

<Text style={styles.fontText}>Hello, World!</Text>

const styles = StyleSheet.create({
    fontText: {
      fontFamily: 'Tilt Prism',
      fontSize: 20,
    },
});

Expo-CLI

برای پروژه های تولید شده توسط Expo، باید کتابخانه expo-fonts را به عنوان یک وابستگی برای وارد کردن و اعمال فونت های سفارشی نصب کنید. با این دستور نصبش کنید:

npx expo install expo-font

اکنون می توانید از فونت های expo در فایل پروژه خود مانند موارد زیر استفاده کنید:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';

const CustomText = (props) => {
  const [fontLoaded, setFontLoaded] = useState(false);

  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });

      setFontLoaded(true);
    }

    loadFont();
  }, []);

  if (!fontLoaded) {
    return <Text>Loading...</Text>;
  }

  return (
    <Text style={{ ...props.style, fontFamily: 'custom-font' }}>
      {props.children}
    </Text>
  );
};

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;

شما می توانید با اعمال الگوی طراحی کانتینر و اجزای نمایشی، بلوک کد بالا را بهتر اصلاح و بهبود بخشید.

در اینجا خروجی هر دو برنامه React Native CLI و Expo CLI آمده است:

تنظیم یک فونت سفارشی به عنوان فونت پیش فرض برای برنامه Expo شما

ممکن است بخواهید از یک فونت سفارشی به‌عنوان فونت پیش‌فرض برای کل برنامه React Native خود استفاده کنید، نه اینکه آن را به‌صورت جداگانه برای هر مؤلفه Text اعمال کنید. برای انجام این کار، می‌توانید از پیش‌فرض Props مؤلفه Text برای تنظیم خانواده فونت پیش‌فرض برای همه مؤلفه‌های Text در برنامه خود استفاده کنید.

از ویژگی Text.defaultProps برای تنظیم ویژگی fontFamily به نام فونت سفارشی خود استفاده کنید.

در اینجا یک مثال است:

import React, { useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';

const App = () => {
  useEffect(() => {
    async function loadFont() {
      await Font.loadAsync({
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      });

      Text.defaultProps.style.fontFamily = 'custom-font';
    }

    loadFont();
  }, []);

  return (
    <Text>Hello, world!</Text>
  );
};

export default App;

تنظیم خانواده فونت پیش‌فرض با استفاده از Text.defaultProps تنها بر اجزای متنی تأثیر می‌گذارد که پس از تنظیم پیش‌فرض ایجاد می‌شوند. اگر قبلاً اجزای متن را قبل از تنظیم خانواده فونت پیش‌فرض ایجاد کرده‌اید، باید ویژگی fontFamily را روی آن مؤلفه‌ها جداگانه تنظیم کنید.

ایجاد یک خانواده فونت سفارشی با چندین سبک فونت

برای ایجاد یک خانواده فونت سفارشی با چندین سبک فونت در یک برنامه ایجاد شده توسط React Native CLI، ابتدا باید فایل های فونت را به پروژه خود وارد کنید. سپس یک شی خانواده فونت سفارشی ایجاد کنید که وزن و سبک فونت را به مسیرهای فایل فونت مربوطه آنها نگاشت می کند.

مثلا:

import { Text } from 'react-native';
import CustomFonts from '../config/Fonts';

const App = () => {
  const CustomFonts = {
    'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
    'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
  };

  async componentDidMount() {
    await Font.loadAsync(CustomFonts);
  }

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

const styles = StyleSheet.create({
  text: {
    fontFamily: 'CustomFont-Regular',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

export default App;

توجه داشته باشید که مسیرها و نام‌های فایل فونت در این مثال فقط مکان‌نما هستند و شما باید آنها را با مسیرها و نام‌های فایل فونت واقعی خود جایگزین کنید. علاوه بر این، باید مطمئن شوید که فایل‌های فونت سفارشی شما به درستی به پروژه شما وارد شده و مسیرهای آنها با مسیرهای تعریف شده در شی خانواده فونت شما مطابقت دارد.

نظرات نهایی در مورد فونت های سفارشی در React Native

فونت های سفارشی می توانند یک لمس منحصر به فرد و شخصی به برنامه React Native شما اضافه کنند. در این مقاله، نحوه استفاده از فونت‌های سفارشی در React Native، از جمله وارد کردن فایل‌های فونت، تنظیم یک فونت سفارشی به عنوان فونت پیش‌فرض برای کل برنامه، ایجاد یک خانواده فونت سفارشی با چندین سبک فونت، و بارگیری فونت‌های سفارشی بدون استفاده بحث شده است. نمایشگاه.

همیشه محدودیت های مجوز هر فونتی را که استفاده می کنید بررسی کنید و مطمئن شوید که مجوز استفاده از آن را در برنامه خود دارید. همچنین مهم است که به خاطر داشته باشید که بارگیری چندین فونت سفارشی می تواند اندازه برنامه شما را افزایش دهد، بنابراین شما باید فقط فونت هایی را که واقعاً به آن نیاز دارید اضافه کنید.

منبع مقاله