Éviter les fausses polices sous Android

J'ai récemment rencontré le problème du faux texte en gras et en italique lors de l'utilisation de la famille de polices dans le développement Android.

Dans cet article, je veux parler de ce problème et de sa solution.

Créer une famille de polices

À partir de l'API 26, il est devenu possible de combiner les polices en familles.

Une famille de polices est une collection de fichiers de polices avec leur style et leur poids.

Vous pouvez créer une nouvelle famille de polices en tant que ressource XML et y faire référence en tant qu’élément unique, au lieu de faire référence à chaque style et poids comme des ressources distinctes.

De cette façon, le système pourra sélectionner la police appropriée en fonction du style du texte que vous essayez d'utiliser.

Exemple de fichier:

<?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>

L'attribut fontStyledétermine le style de la police - normal ( normal) ou italique ( italic).

À son tour, fontWeight- définit le poids, c'est-à-dire le poids de la police.

Et bien sûr, il fontdéfinira la police qui sera utilisée pour les fichiers fontWeightet fontStyle.

Poids de la police

Cette norme est issue du développement Web. La valeur est définie de 100 à 900 par incréments de 100.

Le tableau suivant correspond aux noms communs pour la saturation:

, , — 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"/>