تجنب الخطوط المزيفة في Android

واجهت مؤخرًا مشكلة النص الغامق والمائل المزيف عند استخدام عائلة الخطوط في تطوير Android.

في هذا المقال أريد أن أتحدث عن هذه المشكلة وحلها.

إنشاء عائلة خطوط

بدءًا من API 26 ، أصبح من الممكن دمج الخطوط في مجموعات.

مجموعة الخطوط هي مجموعة من ملفات الخطوط بنمطها ووزنها.

يمكنك إنشاء مجموعة خطوط جديدة كمورد XML والإشارة إليها كعنصر واحد ، بدلاً من الإشارة إلى كل نمط ووزن كمصادر منفصلة.

بهذه الطريقة سيتمكن النظام من تحديد الخط الصحيح بناءً على نمط النص الذي تحاول استخدامه.

ملف مثال:

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/lobster_regular" />
    <font
        android:fontStyle="italic"
        android:fontWeight="400"
        android:font="@font/lobster_italic" />
</font-family>

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        app:fontStyle="normal"
        app:fontWeight="400"
        app:font="@font/lobster_regular" />
    <font
        app:fontStyle="italic"
        app:fontWeight="400"
        app:font="@font/lobster_italic" />
</font-family>

fontStyleتحدد السمة نمط الخط - عادي ( normal) أو مائل ( italic).

بدوره ، fontWeight- يحدد الوزن ، ويعرف أيضًا باسم وزن الخط.

وبالطبع ، fontسيتم تعيين الخط الذي سيتم استخدامه لملف fontWeightو fontStyle.

وزن الخط

جاء هذا المعيار من تطوير الويب. يتم تعيين القيمة من 100 إلى 900 بزيادات 100.

يتوافق الجدول التالي مع الأسماء الشائعة للتشبع:

, , — 400, — 700.

.

, Android , .

, .

Lobster Two :

, , . , - .

, lobster_two.xml , , , :

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        app:fontStyle="normal"
        app:fontWeight="400"
        app:font="@font/lobster_two_normal" />
    <font
        app:fontStyle="italic"
        app:fontWeight="400"
        app:font="@font/lobster_two_italic" />
    <font
        app:fontStyle="normal"
        app:fontWeight="700"
        app:font="@font/lobster_two_bold" />
    <font
        app:fontStyle="italic"
        app:fontWeight="700"
        app:font="@font/lobster_two_bold_italic" />
</font-family>

, lobster_two_incomplete.xml :

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

.

lobster_two_incomplete.xml, lobster_two.xml, .

, , .

// 
val typeFace = resources.getFont(R.font.lobster_two)
textView.setTypeface(typeFace, Typeface.BOLD)

//  
textView.typeface = resources.getFont(R.font.lobster_two_bold)

//  
val typeFace = resources.getFont(R.font.lobster_two_incomplete)
textView.setTypeface(typeFace, Typeface.BOLD)

//  
val typeFace = resources.getFont(R.font.lobster_two_normal)
textView.setTypeface(typeFace, Typeface.BOLD)

xml

// 
<TextView
          ...
          android:fontFamily="@font/lobster_two"
          android:textStyle="bold|italic"/>

//  
<TextView
          ...
          android:fontFamily="@font/lobster_two_bold_italic"/>

//  
<TextView
          ...
          android:fontFamily="@font/lobster_two_incomplete"
          android:textStyle="bold|italic"/>

// 
<TextView
          ...
          android:fontFamily="@font/lobster_two"
          android:textStyle="bold"/>

//  
<TextView
          ...
          android:fontFamily="@font/lobster_two_bold"/>

//  
<TextView
          ...
          android:fontFamily="@font/lobster_two_normal"
          android:textStyle="bold"/>