1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/CarGuo-GSYFlutterBook

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Flutter-Font-Other.md 8.3 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 10.03.2025 00:06 5767d61

Мы все знаем, что в Flutter можно использовать сторонние шрифты через fontFamily. Например, обычно SVG-иконки преобразуются в iconfont.ttf, чтобы реализовать использование векторных иконок. Обычно мы не задаем fontFamily для использования сторонних шрифтов. А какие шрифты используются по умолчанию в Flutter?

Этот вопрос возникает потому, что однажды дизайнер отправил мне следующее изображение и спросил меня: "Почему приложение на платформе Apple использует шрифт PingFang SC, а не .SF UI Display?" Как показано на нижеприведённом изображении, буква "G" может выглядеть немного по-разному, например, у "G" в PingFang SC есть заметный поворот.

Изображение

Здесь я начал интересоваться, как Flutter выбирает шрифты по умолчанию?

По официальной информации, в коде typography.dart видно:

  • По умолчанию Flutter использует шрифт Roboto на Android;
  • На iOS используется шрифт .SF UI Display или .SF UI Text.

По умолчанию на Android используется шрифт Roboto, а на iOS — .SF UI Display или .SF UI Text (где SF означает San Francisco). Если вам нужно использовать другой шрифт, его следует добавить в ваше приложение.

ИзображениеТеоретически, на iOS должно использоваться шрифт .SF UI Display. В соответствии с приведённым ниже кодом, в Typography когда platform равен iOS, используется TextTheme из Cupertino. А свойства white и black в Typography применяются к defaultTextTheme, defaultPrimaryTextTheme и defaultAccentTextTheme в ThemeData, поэтому должны использоваться шрифты .SF. Почему же отображается эффект шрифта PingFang SC?```dart factory Typography({ TargetPlatform platform = TargetPlatform.android, TextTheme black, TextTheme white, TextTheme englishLike, TextTheme dense, TextTheme tall, }) { assert(platform != null || (black != null && white != null)); switch (platform) { case TargetPlatform.iOS: black ??= blackCupertino; white ??= whiteCupertino; break; case TargetPlatform.android: case TargetPlatform.fuchsia: black ??= blackMountainView; white ??= whiteMountainView; } englishLike ??= englishLike2014; dense ??= dense2014; tall ??= tall2014; return Typography._(black, white, englishLike, dense, tall); }

Чтобы понять различия шрифтов на разных системах, после изучения материалов можно сделать следующие выводы:

- По умолчанию в iOS:

   - Китайский шрифт: `PingFang SC`

   - Английский шрифт: `.SF UI Text`, `.SF UI Display`

- По умолчанию в Android:

   - Китайский шрифт: `Source Han Sans` / `Noto`

   - Английский шрифт: `Roboto`

Таким образом, на iOS помимо шрифтов `.SF`, используется также шрифт `PingFang`. В одной из моих предыдущих статей «Flutter полное руководство по разработке (часть 17, полезные советы и решение проблем)», где из-за проблем с отображением при использовании `.SF` для международной локализации, был указан шрифт `PingFang SC` через `fontFamilyFallback`.

```dart
getCopyTextStyle(TextStyle textStyle) {
  return textStyle.copyWith(fontFamilyFallback: ["PingFang SC", "Heiti SC"]);
}

Иллюстрация

Наконец, стало ясно, что когда fontFamily не установлен, будет использоваться первый шрифт из fontFamilyFallback. Шрифты в fontFamilyFallback проверяются последовательно, а если ни один из них не указан, то будут использоваться шрифты по умолчанию платформы.При тестировании версии 1.12.13 было замечено, что проблемы, связанные с .SF, были исправлены, поэтому теперь можно удалить код, использующий fontFamilyFallback.

Какие преимущества использования .SF шрифта на iOS? По мнению интернет-сообщества:

Шрифт .SF Text имеет больший интервал между буквами и более открытую форму некоторых букв, таких как "a" — его верхняя часть больше, что делает его более читаемым для меньших размеров шрифтов; .SF Display лучше всего подходит для больших размеров шрифтов. Разделение происходит примерно на уровне 20pt: шрифты меньше 20pt используют .Text, а те, что равны или превышают 20pt, используют .Display.

Более того, поскольку .SF является динамическим шрифтом, два его семейства — .Text и .Display — автоматически выбираются системой в зависимости от размера шрифта, так что вам не придется самостоятельно регулировать эти параметры.

Можно ли использовать .SF шрифт на Android? По официальной информации:

  • При использовании пакета Material на Android используется шрифт Roboto, а на iOS — San Francisco;
  • При использовании пакета Cupertino тема по умолчанию всегда использует San Francisco;

Однако из-за ограничений лицензии на использование San Francisco этот шрифт может использоваться только на iOS, macOS или tvOS. Поэтому при использовании темы Cupertino на Android будут использоваться запасные шрифты. А теперь давайте уточним, можно ли использовать это на Android?Кроме того, стоит отметить, что в официальной архитектуре упоминается, что логика отображения текста в Flutter имеет слоистую структуру:

  • Библиотека libtxt, основанная на Minikin, используется для выбора шрифтов, разделения строк и т.д.;
  • HarfBuzz используется для выбора глифов и моделирования;
  • Skia выступает в роли движка рендера/GPU-backend;
  • На Android/Fuchsia используется FreeType для рендера шрифтов, а на iOS — CoreGraphics.

Прочитали ли вы эту статью до конца? Увеличивается ли количество ваших странных знаний после этого?

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/CarGuo-GSYFlutterBook.git
git@api.gitlife.ru:oschina-mirror/CarGuo-GSYFlutterBook.git
oschina-mirror
CarGuo-GSYFlutterBook
CarGuo-GSYFlutterBook
master