Избегаем поддельных шрифтов в 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 — устанавливает вес, aka насыщенность шрифта.
И конечно, font будет задавать шрифт который будет использоваться при заданном fontWeight и fontStyle.

Вес шрифта

Этот стандарт пришел с web-разработки. Значение устанавливается от 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"/>