Custom Font mobil inkişafda — bu nədir, formatları və tətbiqi

Custom Font nədir?

Custom Font (xüsusi şrift) — bu, əməliyyat sisteminin standart şrift dəstinə daxil olmayan şrift faylıdır. Tərtibatçılar belə şriftləri brendə uyğun unikal tipoqrafiya üçün layihəyə əlavə edirlər. Xüsusi şriftlər həm ödənişli kommersiya şriftləri, həm də pulsuz open-source şriftlər (məsələn, Inter, Montserrat, Roboto (xüsusi versiya)) ola bilər.

Xüsusi şriftlərin tipik istifadə ssenariləri: brend tətbiqlərin loqoları və başlıqları, tipoqrafiyaya xüsusi tələbləri olan oxu tətbiqləri, tematik şriftlərlə oyunlar, sistem şriftinin lazımi qlifləri dəstəkləmədiyi qeyri-latın dilləri üçün tətbiqlər. Google Fonts məlumatına görə, top-100 tətbiqlərin 60%-dən çoxu vizual fərqləndirmə üçün şriftləri fərdiləşdirir.

Xüsusi şriftlər nə üçün lazımdır

Sistem şriftləri (iOS-da San Francisco, Android-də Roboto) interfeyslər üçün optimallaşdırılıb, lakin brend tipoqrafiyası üçün uyğun deyil. Xüsusi şrift brendin tanınmasını gücləndirir, xüsusi simvollar (ikon şriftləri) ehtiva edə bilər və müəyyən auditoriyalar üçün oxunaqlılığı yaxşılaşdırır. Lakin müxtəlif şriftlərin həddindən artıq istifadəsi UX-i pisləşdirir — tətbiq başına 2-3 ailədən çox olmamaq tövsiyə olunur.

Mobil tətbiqlər üçün şrift formatları

Mobil platformalar bir neçə şrift formatını dəstəkləyir. TrueType (TTF) — iOS və Android-in bütün versiyaları ilə uyğun gələn ən geniş yayılmış formatdır. OpenType (OTF) — liqaturalar, alternativ qliflər və OpenType xüsusiyyətləri dəstəyi ilə TTF-nin genişləndirilməsidir. Hər iki format .ttf və .otf genişlənmələrinə malikdir və mobil platformalarda eyni şəkildə işləyir.

WOFF2 (Web Open Font Format 2) — versiya 10-dan Android-də dəstəklənən veb üçün sıxılmış formatdır. WOFF2 TTF ilə müqayisədə 30-50% sıxılma təmin edir. iOS üçün WOFF2 Safari vasitəsilə dəstəklənir, lakin yerli tətbiqlərdə TTF/OTF-yə çevrilmə tələb olunur. Variable Fonts (variativ şriftlər) — bütün təsvirləri bir faylda saxlayan müasir formatdır.

Mobil inkişaf üçün əsas format olaraq OTF istifadə etmək tövsiyə olunur — TTF ilə eyni ölçüdə OpenType xüsusiyyətlərini dəstəkləyir. APK-da yerə qənaət etmək üçün woff2 sıxılmasından və ya tələb üzrə şrift yükləməsindən istifadə edin.

iOS-də xüsusi şriftlərin qoşulması

iOS-də xüsusi şriftin qoşulması prosesi iki addımdan ibarətdir: faylın layihə bundle-ına əlavə edilməsi və Info.plist-də qeydiyyat. Şrift faylı layihə kataloquna (adətən Resources/Fonts) yerləşdirilir və target-ə daxil edilir. Info.plist-də genişlənmə də daxil olmaqla şrift fayllarının adları ilə UIAppFonts (Fonts provided by application) massivi əlavə edilir.

Qeydiyyatdan sonra şrift UIFont(name:size:) vasitəsilə PostScript adı ilə əlçatan olur. PostScript adını UIFont.familyNames və UIFont.fontNames(forFamilyName:) vasitəsilə öyrənmək olar. Ad səhv göstərilibsə, UIFont(name:size:) nil qaytarır. Debug üçün ilk işə salmada bütün qeydiyyatdan keçmiş şriftləri ekranda göstərmək tövsiyə olunur.

Qoşulma nümunəsi

Swift-də iOS layihəsində Montserrat şriftinin qoşulmasının tam dövrünü nəzərdən keçirək. Montserrat-Regular.ttf faylı layihəyə əlavə edilir, Info.plist-də göstərilir, sonra UIFont vasitəsilə yüklənir və UILabel-ə tətbiq edilir. Hər təsvir (regular, bold, italic) üçün ayrıca fayl və Info.plist-də ayrıca qeyd əlavə edilir.

// 1. Info.plist-də: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Koddakı şrifti yüklə
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // sistem şriftinə fallback
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. NSAttributedString-də istifadə et
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Şrift yüklənmədikdə (UIFont nil qaytarır) vəziyyətin idarə edilməsi məcburidir. Tətbiqin çökməsi əvəzinə sistem şriftindən fallback kimi istifadə edin. Bu, xüsusilə şəbəkədən yüklənən və ya opsional modullara əlavə edilən şriftlər üçün vacibdir.

CTFontManager vasitəsilə dinamik yükləmə

Tələb üzrə endirilən şriftlər üçün CTFontManagerRegisterGraphicsFont istifadə olunur. Bu metod yaddaşdakı məlumatlardan (Data) şrifti qeydiyyatdan keçirir və onu UIFont üçün əlçatan edir. İstifadədən sonra şrift CTFontManagerUnregisterGraphicsFont vasitəsilə qeydiyyatdan çıxarıla bilər. Dinamik yükləmə böyük şrift dəsti olan, hamısının eyni anda lazım olmadığı tətbiqlər üçün faydalıdır.

Android-də xüsusi şriftlərin qoşulması

Android-də xüsusi şriftlər res/font resurs sistemi vasitəsilə əlavə edilir. TTF və ya OTF faylları res/font/ qovluğuna yerləşdirilir, bundan sonra təsvirləri qruplaşdırmaq üçün XML Font Family resursları yaradılır. Android 8.0-dan (API 26) başlayaraq bu yeganə tövsiyə olunan üsuldur. Köhnə versiyalar üçün assets və Typeface.createFromAsset istifadə olunur.

XML Font Family təsvir (regular, bold, italic) ilə şrift faylı arasında uyğunluğu təsvir edir. XML işarələməsində android:fontFamily="@font/my_font" atributu müvafiq stillə setTypeface çağırışında avtomatik olaraq lazımi faylı seçir. Bu, tipoqrafiyanı sadələşdirir — temada ailəni göstərmək kifayətdir və Android setTypeface(textView, Typeface.BOLD) çağırışında bold-u özü seçir.

Font Family yaradılması

Müxtəlif təsvirlər üçün bütün şrift fayllarının sadalandığı res/font/my_font.xml XML faylı yaradın. Hər elementin fontStyle (normal/italic) və fontWeight (100-900) atributları var. Bundan sonra işarələmədə android:fontFamily="@font/my_font" göstərin. textStyle="bold" istifadə edərkən Android avtomatik olaraq fontWeight 700 olan faylı seçəcək.

<!-- res/font/my_font.xml -->
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        app:font="@font/my_font_regular" />
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/my_font_bold" />
</font-family>

Font Family istifadə edərkən resurs üsulu avtomatik olaraq şriftləri keşləyir və düzgün təsviri seçir. Lazımi çəki ailədə yoxdursa, Android onu ən yaxın mövcud olanından sintez edir. Şrift üzərində dəqiq nəzarət üçün faylın birbaşa göstərilməsi ilə Typeface.create() istifadə edin.

Flutter və React Native-də qoşulma

Platformalararası framework-lərdə şriftlərin qoşulması vahidləşdirilmişdir. Flutter şriftləri göstərmək üçün pubspec.yaml-dən istifadə edir: fayllar layihənin fonts/ qovluğuna yerləşdirilir, sonra ailə və təsvirlər göstərilməklə fonts bölməsində elan edilir. Daha sonra şrift TextStyle(fontFamily: 'Montserrat') vasitəsilə və ya tətbiqin temasında tətbiq edilir. Flutter TTF və OTF-ni dəstəkləyir.

React Native iki yanaşmadan istifadə edir: yerli (Info.plist və res/font vasitəsilə) və ya react-native-vector-icons və @expo-google-fonts kitabxanaları vasitəsilə. Expo prosesi sadələşdirir — şriftlər expo-font vasitəsilə yüklənir: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation və temalar şrifti qlobal olaraq təyin etməyə imkan verir.

Flutter-də nümunə

pubspec.yaml-də şriftlərin elanı və MaterialApp temasında tətbiqi. Montserrat-Regular.ttf və Montserrat-Bold.ttf faylları fonts/ qovluğuna yerləşdirilir. Elandan sonra şrift bütün tətbiqdə TextStyle vasitəsilə əlçatan olur. Flutter fontWeight: FontWeight.bold olduqda avtomatik olaraq bold faylından istifadə edir.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Temada istifadə
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Flutter göstərilən yolda şrifti tapmasa, tətbiq səhvsiz sistem fallback şriftindən istifadə edir. Debug üçün MaterialApp-də checkConsistency-i aktivləşdirin — o, şriftlərin mövcudluğunu yoxlayır və olmadıqda konsolda xəbərdarlıqlar göstərir.

Şrift ölçüsünün optimallaşdırılması

APK və IPA-nın ölçüsü birbaşa daxil edilmiş şriftlərin sayından asılıdır. Bir TTF faylı latın simvol dəsti üçün 50-500 KB, kiril, çin heroqlifləri və ya digər genişləndirilmiş dəstləri dəstəkləyən şriftlər üçün 2-5 MB-a qədər çəkir. On şrift tətbiqin ölçüsünə 10-20 MB əlavə edə bilər ki, bu da mobil yükləmə üçün kritikdir.

Optimallaşdırma üçün subsetting — şrift faylından istifadə olunmayan simvolların silinməsi istifadə edin. glyphhanger, fonttools (pyftsubset) və Google Webfont Optimizer kimi alətlər yalnız lazımi qliflərlə (latın + kiril + rəqəmlər + durğu işarələri) şrift versiyası yaradır. Bu, ölçüsü 50-80% azaldır. iOS-da ilk işə salmada lazım olmayan şriftlər üçün on-demand resurslarından istifadə etmək olar.

Variativ şriftlər

Variable Font (variativ şrift) — bu, Thin-dən Black-a və Condensed-dən Expanded-a qədər bütün təsvirləri ehtiva edən bir fayldır. Bir variativ şrift müxtəlif çəkilərlə 10-20 ayrıca faylı əvəz edə bilər. Belə bir faylın ölçüsü təxminən 1-2 statik fayla bərabərdir. Dəstək: iOS 11+, Android 10+, Flutter (FontVariation vasitəsilə), React Native (xüsusi kitabxanalar vasitəsilə).

Sıxılma və tələb üzrə yükləmə

Şrift ölçüsünü 30-50% azaltmaq üçün WOFF2 istifadə edin. API 29 olan Android-də birbaşa WOFF2 istifadə etmək olar. iOS üçün qeydiyyatdan əvvəl WOFF2-ni TTF-yə çevirmək tələb olunur. Yalnız onbordinqdə və ya müəyyən ekranlarda istifadə olunan şriftləri on-demand resursları (iOS) və ya Dynamic Feature (Android) vasitəsilə yükləyin — onlar baza APK-sına daxil olmayacaq.

Performans və best practices

Xüsusi şriftlər performansa iki yolla təsir edir: yükləmə vaxtı və yaddaş. Şriftə ilk müraciət zamanı sistem faylı diskdən oxuyur, şrift cədvəllərini təhlil edir və göstərmək üçün daxili strukturlar yaradır. 1 MB ölçüsündə şrift üçün bu, 20-50 ms çəkir. İlk yükləmədən sonra keşləmə təkrar müraciətlərdə gecikməni aradan qaldırır.

Yaddaş: hər yüklənmiş şrift proses keşində saxlanılır. Sistem şriftləri əvvəlcədən yüklənib, xüsusi şriftlər ilk istifadədə yüklənir. Yaddaşda şrift diskdəkindən təxminən 2-3 dəfə çox yer tutur, çünki sökülmüş strukturlar: cmap, glyf, head, hmtx cədvəlləri. Orta ölçülü 5 xüsusi şrift (ümumi həcm 3 MB) üçün təxminən 6-9 MB RAM tələb olunur.

Tövsiyələr

Xüsusi şriftlərin sayını tətbiq başına 2-3 ailə ilə məhdudlaşdırın. Bir neçə təsviri əvəz etmək üçün variativ şriftlərdən istifadə edin. UI elementləri (düymələr, etiketlər, siyahılar) üçün sistem şriftlərini, yalnız vurğu tipoqrafiyası (başlıqlar, bannerlər) üçün xüsusi şriftləri tətbiq edin. Android-də Typeface-i Map vasitəsilə, iOS-da UIFont-u statik dəyişənlər vasitəsilə keşləyin.

object FontCache {
    private val cache = mutableMapOf<String, Typeface>()
    fun get(context: Context, fontId: Int): Typeface {
        return cache.getOrPut(fontId.toString()) {
            ResourcesCompat.getFont(context, fontId)
        }
    }
}
// RecyclerView-də istifadə
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

onBindViewHolder-da Typeface yükləməsi yalnız keş olduqda icazəlidir. Keş olmadan hər createFromAsset çağırışı yeni obyekt yaradır və faylı diskdən oxuyur. RecyclerView sürüşdürüldükdə bu, nəzərəçarpacaq ləngimələrə səbəb olur. Keş problemi həll edir, çünki şrift bir dəfə yüklənir və təkrar istifadə olunur.