『Flutter』 字型

tags: Flutter

載入第三方

免費字型下載
http://www.sentyfont.com/download.htm

• Flutter預設字體

Android "Roboto"
Ios ".SF UI Display" or ".SF UI Text"

• 可取得當下Theme資訊

Theme.of(context).textTheme

載入檔案

設定檔案 pubspec.yaml

 fonts:
   - family: Schyler                      //呼叫名稱
     fonts:
       - asset: fonts/Schyler-Regular.ttf //檔案位置
       - asset: fonts/Schyler-Italic.ttf
         style: italic
   - family: Trajan Pro
     fonts:
       - asset: fonts/TrajanPro.ttf
       - asset: fonts/TrajanPro_Bold.ttf
         weight: 700

• weight 属性指定了文件中字体轮廓的字重为 100 的整数倍，并且范围在 100 和 900 之间。这些值对应 FontWeight 并能够在 TextStyle 对象的 fontWeight 属性上使用。
• style 属性指定文件中字体的轮廓是否为 italic 或 normal。这些值对应 FontStyle 并能够在 TextStyle 对象的 fontStyle 属性上使用。

使用

 Text("壹貳參肆伍陸柒ABCDEFG1234567=/*-",
            style: new TextStyle(
            fontFamily: "Schyler",
            fontStyle:FontStyle.italic,
            fontSize: 30),

官方文件

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

使用Google_font

pub.dev https://pub.dev/packages/google_fonts#-example-tab-

install

dependencies:
  google_fonts: ^1.0.0

import

import 'package:google_fonts/google_fonts.dart';

Example

ThemeData(textTheme:GoogleFonts.habibi())

Text("ABCDEFG1234",style: GoogleFonts.habibi(),)

參考

https://medium.com/flutter-community/font-features-in-flutter-320222fc171d

各系統預設字體

https://mollykannn.github.io/2016/09/11/operating-system-default-fonts/

問題

Q:只有預設字體沒有其他預設字體

A:有可能為了平台一至性,只放入預設字體

Inconsistent platform fonts
Since Flutter's font discovery for default fonts depends on the fonts present on the device, it is not safe to assume all default fonts will be available or consistent across devices.

A known example of this is that Samsung devices ship with a CJK font that has smaller line spacing than the Android default. This results in Samsung devices displaying more tightly spaced text than on other Android devices when no custom font is specified.

To avoid this, a custom font should be specified if absolute font consistency is required for your application.

https://api.flutter.dev/flutter/painting/TextStyle-class.html