Мы все знаем, что в Flutter можно использовать сторонние шрифты через fontFamily
. Например, обычно SVG-иконки преобразуются в iconfont.ttf
, чтобы реализовать использование векторных иконок. Обычно мы не задаем fontFamily
для использования сторонних шрифтов. А какие шрифты используются по умолчанию в Flutter?
Этот вопрос возникает потому, что однажды дизайнер отправил мне следующее изображение и спросил меня: "Почему приложение на платформе Apple использует шрифт PingFang SC
, а не .SF UI Display
?" Как показано на нижеприведённом изображении, буква "G" может выглядеть немного по-разному, например, у "G" в PingFang SC
есть заметный поворот.
Здесь я начал интересоваться, как Flutter выбирает шрифты по умолчанию?
По официальной информации, в коде typography.dart
видно:
Roboto
на Android;.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? По официальной информации:
Roboto
, а на iOS — San Francisco
;San Francisco
;Однако из-за ограничений лицензии на использование San Francisco
этот шрифт может использоваться только на iOS, macOS или tvOS. Поэтому при использовании темы Cupertino на Android будут использоваться запасные шрифты. А теперь давайте уточним, можно ли использовать это на Android?Кроме того, стоит отметить, что в официальной архитектуре упоминается, что логика отображения текста в Flutter имеет слоистую структуру:
libtxt
, основанная на Minikin, используется для выбора шрифтов, разделения строк и т.д.;Прочитали ли вы эту статью до конца? Увеличивается ли количество ваших странных знаний после этого?
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )