Flutter 앱의 기본 글꼴 모음은 무엇인가요?

Flutter 모바일 애플리케이션을 디자인하고 개발하는 동안 사용자는 클라이언트의 요구 사항에 따라 사용자 정의 글꼴 모음을 설정할 수 있습니다. 이 기사에서는 Flutter 앱의 기본 글꼴 모음이 무엇인지 살펴보겠습니다.

Flutter 앱의 기본 글꼴 모음은 무엇인가요?
MaterialApp의 기본 글꼴은/flutter/packages/flutter/lib/src/material/typography.dart에 설명되어 있습니다.

iOS에서 기본 TextTheme은

static const TextTheme blackCupertino = TextTheme(
  overline  : TextStyle(debugLabel: 'blackCupertino overline',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  caption   : TextStyle(debugLabel: 'blackCupertino caption',    fontFamily: '.SF UI Text', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
  button    : TextStyle(debugLabel: 'blackCupertino button',     fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  bodyText1 : TextStyle(debugLabel: 'blackCupertino bodyText1',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  bodyText2 : TextStyle(debugLabel: 'blackCupertino bodyText2',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline1 : TextStyle(debugLabel: 'blackCupertino headline1',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline2 : TextStyle(debugLabel: 'blackCupertino headline2',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline3 : TextStyle(debugLabel: 'blackCupertino headline3',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline4 : TextStyle(debugLabel: 'blackCupertino headline4',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline5 : TextStyle(debugLabel: 'blackCupertino headline5',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline6 : TextStyle(debugLabel: 'blackCupertino headline6',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  subtitle1 : TextStyle(debugLabel: 'blackCupertino subtitle1',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  subtitle2 : TextStyle(debugLabel: 'blackCupertino subtitle2',   fontFamily: '.SF UI Text', inherit: true, color: Colors.black, decoration: TextDecoration.none),
);

Android에서 기본 TextTheme은

static const TextTheme blackMountainView = TextTheme(
  overline  : TextStyle(debugLabel: 'blackMountainView overline',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  caption   : TextStyle(debugLabel: 'blackMountainView caption',    fontFamily: 'Roboto', inherit: true, color: Colors.black87, decoration: TextDecoration.none),
  button    : TextStyle(debugLabel: 'blackMountainView button',     fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  bodyText1 : TextStyle(debugLabel: 'blackMountainView bodyText1',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  bodyText2 : TextStyle(debugLabel: 'blackMountainView bodyText2',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline1 : TextStyle(debugLabel: 'blackMountainView headline1',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline2 : TextStyle(debugLabel: 'blackMountainView headline2',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline3 : TextStyle(debugLabel: 'blackMountainView headline3',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline4 : TextStyle(debugLabel: 'blackMountainView headline4',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline5 : TextStyle(debugLabel: 'blackMountainView headline5',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  headline6 : TextStyle(debugLabel: 'blackMountainView headline6',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  subtitle1 : TextStyle(debugLabel: 'blackMountainView subtitle1',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
  subtitle2 : TextStyle(debugLabel: 'blackMountainView subtitle2',   fontFamily: 'Roboto', inherit: true, color: Colors.black, decoration: TextDecoration.none),
);

다음 코드로 글꼴 모음을 검색할 수 있습니다.

Theme.of(context).textTheme.caption
기본 글꼴은 운영 체제에 따라 다릅니다.

Android는 Roboto 글꼴을 사용합니다.
iOS는 San Francisco 글꼴(특히 SF Pro Display)을 사용합니다.
오늘은 여기까지입니다.

산출:
기본 글꼴 모음



결론:
Flutter Journey에 함께 해주셔서 감사합니다!!!

이번 글에서는 Flutter에서 TextTheme을 사용하여 전역 글꼴 모음을 설정하는 방법에 대해 알아보았습니다.

FlutterAgency.com Flutter 기술 전용의 가장 인기 있는 온라인 포털 중 하나이며 매일 수천 명의 고유 방문자가 Flutter에 대한 지식을 향상시키기 위해 이 포털을 방문합니다.