React Native’de Tipografi Ustalaşma: Yazı Tipi Ağırlıkları ve Özel Yazı Tipleri

Görsel olarak çekici ve kullanıcı dostu React Native uygulamaları oluşturmanın anahtarı, tipografinin ustalaşmasıdır. Bu kılavuz, font kalınlıklarının etkili bir şekilde nasıl yönetileceğini ve projelerinize özel fontların nasıl ekleneceğini ele almaktadır.

İçerik Tablosu

• Font Kalınlığı Stili
• Özel Fontların Eklenmesi

Font Kalınlığı Stili

React Native, Text bileşeni içindeki fontWeight stil özelliğini kullanarak font kalınlığı üzerinde basit bir kontrol sunar. Bu özellik, sayısal değerler (100-900) ve önceden tanımlanmış anahtar kelimeler kabul eder:

• 'normal': 400’e eşdeğerdir.
• 'bold': 700’e eşdeğerdir.
• '100', '200', '300', '400', '500', '600', '700', '800', '900': Belirli kalınlık değerleri.

İşte farklı font kalınlıklarını gösteren bir örnek:

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

const MyComponent = () => {
  return (
    <Text style={styles.text}>
      Bu normal kalınlıkta (400). <Text style={styles.boldText}>Bu kalın (700). <Text style={styles.lightText}>Bu ince (300).
    </Text>
  );
};

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

export default MyComponent;

Font kalınlığının işlenmesinin seçilen font ailesine bağlı olduğunu unutmayın. Tüm fontlar tüm kalınlık yelpazesini desteklemez. Belirli bir kalınlık desteklenmiyorsa, React Native en yakın mevcut kalınlığa geri döner.

Özel Fontların Eklenmesi

Varsayılan sistem fontlarının ötesinde tasarım olanaklarınızı genişletmek, özel fontların eklenmesini ve kullanılmasını içerir. Bu, uygulamanızın görsel çekiciliğini ve markalaşmasını geliştirir.

1. Font Dosyalarını Ekleyin: Font dosyalarınızı (örneğin, .ttf, .otf) projenizin varlıkları içinde özel bir klasöre yerleştirin (örneğin, src/assets/fonts).
2. Fontları Kaydedin (Expo): Expo kullanıyorsanız, expo-font‘u kullanın:

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' }}>Özel Font Yazısı</Text>
  );
}

3. Fontları Kaydedin (Expo Dışı): Expo dışı projeler için, daha manuel bir yaklaşım gerekebilir (Bu örnek, platform özgü işleme için bir yer tutucu kullanır. İhtiyaçlarınıza göre ayarlayın.):

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // Gerektiği gibi yolu ayarlayın

const App = () => {
  return (
    <Text style={styles.text}>Bu özel bir font kullanıyor.</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', // Burada farklı işletim sistemlerini ele alın.
  },
});

export default App;

4. Kayıtlı Fontları Kullanın: Kaydedildikten sonra, Text bileşenlerinizin fontFamily stil özelliğinde font ailesi adını kullanın. Adın, kayıt sırasında kullanılan font dosya adı ile eşleştiğinden emin olun.

Font kalınlığı ve özel font tekniklerini birleştirerek, React Native uygulamalarınızda hassas tipografik kontrol elde edersiniz; bu da daha iyi görsel tutarlılık ve daha profesyonel bir kullanıcı deneyimine yol açar. Tutarlı işlenmeyi sağlamak için kapsamlı cihazlar arası test yapmayı unutmayın.