Flutter 웹 글꼴 문제 해결
이런 상황을 피하기 위해서는 글씨체를 지정해야 한다.
(로컬을 지정하는 방법도 있는 것 같은데 영어와 일본어에 대응하는 애플리케이션이라 그 방법을 적용하지 않았다.)
assets 폴더에서 글꼴을 읽는 방법도 있지만, 이번에는 구글이fonts로 포장하는 방법을 채택했습니다.
기본용법
import 문
import 'package:google_fonts/google_fonts.dart';
main.dart의 MyApp의 TheemeData에 text Theme를 추가합니다.이렇게 하면 전체 응용 프로그램이 이 글꼴을 반영할 수 있다.Sawarabi Gothic에서 글꼴을 지정합니다.
MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.sawarabiGothicTextTheme(
Theme.of(context).textTheme
),
),
);
사용 가능한 글꼴
사용할 수 있는 일본어 글꼴은 다음과 같습니다.
Sawarabi Gothic이 기본값에 가장 가깝기 때문에 이걸 골랐습니다.
!
부분 글꼴(Noto Sans Japanese) 등은 지원되지 않습니다.ttf가 아니라 otf라서 아직 대응이 안 된 것 같아요.Q1이 끝나기 전에 대응할 계획이다.
https://github.com/material-foundation/google-fonts-flutter/issues/126
그나저나 노트산스 자바네스가 있는데 자바네스는 자바네스의 오자가 아니라 자바어다.
https://github.com/material-foundation/google-fonts-flutter/issues/210
모바일 터미널에서 기본 글꼴 사용하기
웹에서만 이 글꼴을 사용하기 때문에 모바일 터미널에서 표준 글꼴을 사용하고자 하기 때문에 kIs웹을 사용하면 다음과 같다.
!
kIsWeb 필요
import 'package:flutter/foundation.dart';
MaterialApp(
theme: ThemeData(
textTheme: kIsWeb ? GoogleFonts.sawarabiGothicTextTheme(
Theme.of(context).textTheme
) : null,
),
);
다크 모드 지원
또한 다크 모드를 사용할 때
Theme.of(context).textTheme
를 ThemeData(brightness: Brightness.dark).textTheme
로 설정하면 다크 모드에 해당하는 문자 색상이 됩니다.adaptive_theme 사용 설치 예
어둠 모드로 전환하기 위해 adaptivethe를 사용합니다.
아래와 같다.
//省略
Widget build(BuildContext context) {
return AdaptiveTheme(
light: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
visualDensity: VisualDensity.adaptivePlatformDensity,
textTheme: kIsWeb
? GoogleFonts.sawarabiGothicTextTheme(
ThemeData(brightness: Brightness.light).textTheme,
)
: null,
),
dark: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.cyan,
accentColor: Colors.cyan,
visualDensity: VisualDensity.adaptivePlatformDensity,
textTheme: kIsWeb
? GoogleFonts.sawarabiGothicTextTheme(
ThemeData(brightness: Brightness.dark).textTheme,
)
: null,
),
//省略
다른 언어 보이기
다른 언어의 문자를 표시하거나 시간이 좀 걸리는 문자를 표시합니다.
Reference
이 문제에 관하여(Flutter 웹 글꼴 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/enoiu/articles/596078e878145d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)