Vodič za korištenje prilagođenih fontova u React Native

Vodič za korištenje prilagođenih fontova u React Native
Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

React Native nudi nekoliko zadanih stilova fontova koje možete odabrati prilikom izrade svoje aplikacije. Međutim, kako biste svojoj aplikaciji ponudili originalnost i individualnost koja joj je potrebna da bi se istaknula na prenapučenom tržištu, možda ćete povremeno trebati koristiti prilagođene fontove.





Naučimo kako primijeniti prilagođene fontove prilikom izrade vašeg sljedećeg React Native projekta.



MAKEUSEOF VIDEO DANA

Razumijevanje formata datoteka fontova

Uz React Native, možete dodati prilagođene datoteke fontova projektu i prilagoditi izgled tekstualnih elemenata u vašim aplikacijama. Ovi prilagođeni fontovi dolaze u datotekama fontova s ​​različitim formatima datoteka. Datoteke sadrže kodirane informacije o stilu za određeni tip fonta.





Najčešći formati datoteka fontova koje ćete koristiti u mobilnom razvoju React Native su:

google play store na vatri tablet
  • Font TrueType (TTF): Ovo je uobičajeni format datoteke fonta koji podržava većina operativnih sustava i aplikacija. TTF datoteke su relativno male i mogu sadržavati mnogo znakova.
  • OpenType font (OTF): sličan je TTF-u, ali može sadržavati i napredne tipografske značajke. OTF datoteke su veće od TTF datoteka i ne podržava ih svaka aplikacija.
  • Ugrađeni OpenType font (EOT): EOT datoteke su komprimirane i mogu uključivati ​​informacije o upravljanju digitalnim pravima (DRM) kako bi se spriječilo neovlašteno korištenje. Međutim, ne podržavaju svi preglednici EOT i općenito se ne preporučuje za korištenje u modernim projektima.

Kada koristite prilagođene fontove u projektu, važno je odabrati format datoteke fonta koji zadovoljava potrebe projekta. To može uključivati ​​čimbenike kao što su podrška ciljne platforme, veličina datoteke, zahtjevi za licenciranje i podrška za napredne tipografske značajke.



Uvoz i primjena datoteka fontova u React Native

Možete preuzeti datoteku fonta s bilo kojeg mjesta na internetu i uvesti je u svoj osobni React Native projekt za korištenje. Međutim, postoji mnogo dobrih, sigurnih web stranica za preuzimanje besplatnih fontova od sigurno.

Da biste uvezli datoteku fonta u svoj React Native projekt, izradite sredstva/fontovi direktorij u korijenu vašeg projekta i premjestite datoteke fontova u njega.



prilagođeni fontovi1-4

Koraci potrebni za korištenje prilagođenih fontova razlikuju se kada radite s projektom koji je generirao isključivo React Native ili React Native projektom kojim upravlja Expo.

React Native CLI

Ako radite s projektom koji je generirao React Native CLI, stvorite react-native.config.js datoteku i unutar nje definirajte ove postavke:



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

Ova konfiguracija govori projektu da uključi sredstva fonta pohranjena u './assets/fonts/' direktoriju kako bi im aplikacija mogla pristupiti prilikom iscrtavanja tekstualnih elemenata.

ovu radnju nije moguće dovršiti jer je datoteka otvorena u drugom programu

Zatim možete povezati imovina mapu u svoj projekt pokretanjem sljedećeg:

 npx react-native-asset