投稿日: 投稿者: userno2

2021/2/10 google_fonts,Readmeの訳

Contents

google_fonts

Flutterのgoogle_fontsパッケージを使用すると、Flutterアプリでfonts.google.comの977フォント（およびそのバリアント）を簡単に使用できます。

Getting Started

google_fontsパッケージを使用すると、.ttfまたは.otfファイルをアセットフォルダーに保存してpubspecにマッピングする必要はありません。

代わりに、実行時にhttp経由で一度フェッチし、アプリのファイルシステムにキャッシュすることができます。

これは開発に理想的であり、アプリバンドルのサイズを縮小しようとしている本番アプリに適した動作になる可能性があります。

それでも、いつでもassetsディレクトリにフォントファイルを含めることを選択することもできます。GoogleFontsパッケージはhttpフェッチよりも事前にバンドルされたファイルを優先します。

このため、Google Fontsパッケージを使用すると、開発者は同じAPIを使用しながら、フォントを事前にバンドルするか、http経由で読み込むかを選択できます。

たとえば、FlutterアプリでGoogleFontsのLatoフォントを使用するとします。

まずgoogle_fontsパッケージをpubspec.yamlファイルに追加します。

そしてインポートするためにimport文を記述します。

import 'package:google_fonts/google_fonts.dart';

デフォルトのTextStyleでGoogleFontsを使用するには：

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),

または、フォントを動的にロードする場合：

Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont('Lato'),
),

既存のTextStyleでGoogleFontsを使用するには：

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

あるいは、

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(textStyle: Theme.of(context).textTheme.display1),
),

のようにします。

fontSize、fontWeight、またはfontStyleをオーバーライドするには：

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.display1,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

また、Google Fonts.lato TextTheme（）を使用して、アプリ全体のテキストテーマで「Lato」フォントを使用するように作成または変更することもできます。

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

または、いくつかのスタイルで異なるフォントを使用する必要があるTextThemeが必要な場合：

final textTheme = Theme.of(context).textTheme;

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(textTheme).copyWith(
      body1: GoogleFonts.oswald(textStyle: textTheme.body1),
    ),
  ),
);

Bundling font files in your application’s assets #

google_fontsパッケージは、（HTTPを介して実行時にフェッチするのではなく）pubspec.yamlのアセット内の一致するフォントファイルを自動的に使用します。 使用するフォントが決まったら、次のようにします。

1.https://fonts.google.comからフォントファイルをダウンロードします。 特定のファミリに使用しているウェイトとスタイルをダウンロードするだけで済みます。 イタリック(italic)スタイルでは、ファイル名にItalicが含まれます。 フォントの重みは、次のようにファイル名にマップされます。

{
  FontWeight.w100: 'Thin',
  FontWeight.w200: 'ExtraLight',
  FontWeight.w300: 'Light',
  FontWeight.w400: 'Regular',
  FontWeight.w500: 'Medium',
  FontWeight.w600: 'SemiBold',
  FontWeight.w700: 'Bold',
  FontWeight.w800: 'ExtraBold',
  FontWeight.w900: 'Black',
}

2.それらのフォントをトップレベルのアプリディレクトリ（例：google_fonts）に移動します。

3.pubspec.yamlファイルのassetsセクションにフォルダ(例えばgoogle_fonts/)を記述します。

これらのファイルはassetsとしてリストされているため、pubspec.yamlのフォントセクションにリストする必要はありません。

これは、ファイルがGoogle Fonts APIから一貫して名前が付けられているために実行できます（したがって、名前を変更しないでください！）

Licensing Fonts #

fonts.google.comのフォントには、各フォントのライセンスファイルが含まれています。 たとえば、LatoフォントにはOFL.txtファイルが付属しています。

公開アプリで必要なフォントを決定したら、適切なライセンスをフラッターアプリのLicenseRegistryに追加する必要があります。

例えば:

void main() {
  LicenseRegistry.addLicense(() async* {
    final license = await rootBundle.loadString('google_fonts/OFL.txt');
    yield LicenseEntryWithLineBreaks(['google_fonts'], license);
  });
  
  runApp(...);
}

 

参考

https://pub.dev/packages/google_fonts

AndroidとiOSは高品質のシステムフォントを提供しますが、デザイナーからの最も一般的な要求の1つはカスタムフォントです。

たとえば、デザイナーがカスタムビルドしたフォントを使用している場合や、GoogleFontsからフォントをダウンロードした場合などです。

Note:1,000を超えるオープンソースのフォントファミリーに直接アクセスするには、google_fontsパッケージを確認してください。

Note:カスタムフォントを使用する別の方法については、特に1つのフォントを複数のプロジェクトで再利用する場合は、「パッケージからフォントをエクスポートする」を参照してください。

Flutterはカスタムフォントを扱う機能を有しています。

アプリ全体または個々のウィジェットにカスタムフォントを適用できます。 このレシピは、次の手順でカスタムフォントを使用するアプリを作成します。

  1. fontファイルをインポートする。
  2. pubspecファイルでfontを宣言する。
  3. フォントをデフォルトに設定する。
  4. 特定のウィジェットでフォントを使う。

1. Import the font files

フォントを操作するには、フォントファイルをプロジェクトにインポートします。 Flutterプロジェクトのルートにあるfontsまたはassetsフォルダーにフォントファイルを配置するのが一般的な方法です。

たとえば、RalewayおよびRoboto Monoフォントファイルをプロジェクトにインポートするには、フォルダー構造は次のようになります。

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

工事中🏗

 

 

 

参考

https://flutter.dev/docs/cookbook/design/fonts

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です