React Native में टाइपोग्राफी में महारथ: फ़ॉन्ट वज़न और कस्टम फ़ॉन्ट

अगस्त 11, 2025 - By admin

Spread the love

विजुअली आकर्षक और उपयोगकर्ता के अनुकूल React Native एप्लीकेशन बनाने के लिए टाइपोग्राफी में महारथ हासिल करना महत्वपूर्ण है। यह गाइड आपके प्रोजेक्ट्स में फ़ॉन्ट वेट को प्रभावी ढंग से प्रबंधित करने और कस्टम फ़ॉन्ट्स को शामिल करने के तरीके का पता लगाता है।

फ़ॉन्ट वेट स्टाइलिंग

React Native Text कंपोनेंट के अंदर fontWeight स्टाइल प्रॉपर्टी का उपयोग करके फ़ॉन्ट वेट पर सीधा नियंत्रण प्रदान करता है। यह प्रॉपर्टी संख्यात्मक मान (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> <Text style={styles.lightText}>यह लाइट (300) है।</Text>
    </Text>
  );
};

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

export default MyComponent;

याद रखें कि फ़ॉन्ट वेट रेंडरिंग चुने हुए फ़ॉन्ट परिवार पर निर्भर करता है। सभी फ़ॉन्ट वेट की पूरी रेंज का समर्थन नहीं करते हैं। यदि कोई विशिष्ट वेट समर्थित नहीं है, तो React Native निकटतम उपलब्ध वेट पर वापस आ जाएगा।

कस्टम फ़ॉन्ट्स को शामिल करना

डिफ़ॉल्ट सिस्टम फ़ॉन्ट्स से परे अपनी डिज़ाइन संभावनाओं का विस्तार करने में कस्टम फ़ॉन्ट्स को जोड़ना और उनका उपयोग करना शामिल है। यह आपके ऐप की दृश्य अपील और ब्रांडिंग को बढ़ाता है।

फ़ॉन्ट फ़ाइलें जोड़ें: अपनी फ़ॉन्ट फ़ाइलें (जैसे, .ttf, .otf) अपने प्रोजेक्ट की एसेट्स में एक समर्पित फ़ोल्डर में रखें (जैसे, src/assets/fonts)।
फ़ॉन्ट्स रजिस्टर करें (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>
  );
}

फ़ॉन्ट्स रजिस्टर करें (गैर-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', //यहाँ विभिन्न OS को संभालें।
  },
});

export default App;

रजिस्टर्ड फ़ॉन्ट्स का उपयोग करें: एक बार रजिस्टर होने के बाद, अपने Text कंपोनेंट्स के fontFamily स्टाइल प्रॉपर्टी में फ़ॉन्ट परिवार के नाम का उपयोग करें। सुनिश्चित करें कि नाम रजिस्ट्रेशन के दौरान उपयोग किए गए फ़ॉन्ट फ़ाइल नाम से मेल खाता है।

फ़ॉन्ट वेट और कस्टम फ़ॉन्ट तकनीकों के संयोजन से, आप अपने React Native ऐप्स में सटीक टाइपोग्राफ़िक नियंत्रण प्राप्त करते हैं, जिससे बेहतर दृश्य स्थिरता और अधिक पेशेवर उपयोगकर्ता अनुभव प्राप्त होता है। सुसंगत रेंडरिंग सुनिश्चित करने के लिए पूरी तरह से क्रॉस-डिवाइस परीक्षण याद रखें।

विषय सूची

फ़ॉन्ट वेट स्टाइलिंग

कस्टम फ़ॉन्ट्स को शामिल करना

Related posts:

प्रातिक्रिया दे जवाब रद्द करें