flutter 如何添加谷歌字体

gv8xihay  于 2022-12-30  发布在  Flutter
关注(0)|答案(3)|浏览(199)
child: RichText(
                        textAlign: TextAlign.start,
                        text: const TextSpan(
                            text: "What are you looking for?", //here
                            style: TextStyle(
                                color: Colors.black87,
                                fontSize: 18.0,
                                fontWeight: FontWeight.bold)),
                      ),

帮我在文本部分插入谷歌字体。这是代码风格:谷歌字体.汉默史密斯一()

093gszye

093gszye1#

可以在Text小部件的style属性中使用字体。
示例:

child: RichText(
                        textAlign: TextAlign.start,
                        text: const TextSpan(
                            text: "What are you looking for?", //here
                            style: GoogleFonts.hammersmithOne(
                             textStyle : TextStyle(
                                color: Colors.black87,
                                fontSize: 18.0,
                                fontWeight: FontWeight.bold)),
                              )
                            ),
qrjkbowd

qrjkbowd2#

在pubspec.yaml google_fonts: ^3.0.1中添加依赖项
然后在文本小部件中使用样式属性

Text('What are you looking for?',
style: GoogleFonts.hammersmithOne(
  fontSize: 48,
  fontWeight: FontWeight.w700,
  fontStyle: FontStyle.italic,
  color: Colors.greenAccent),
);
flseospp

flseospp3#

可以通过两种方式添加Google Fonts,当onlineoffline

在线

1.下载包google_fonts,它从互联网上获取google fonts
1.添加导入语句import 'package:google_fonts/google_fonts.dart'
1.把它用在造型上

Text(
  'This is hammersmithOne from Google Font'
  style: GoogleFonts.hammersmithOne(),
),

离线

1.访问https://fonts.google.com/并下载hammersmithOne字体。
1.在根目录下,创建一个名为google_fonts的目录。
1.复制(Copy)-将hammersmithOne.ttf文件粘贴到google_fonts文件夹。
1.打开pubspec.yaml文件,在资源下:章节添加-google_fonts/

Text(
  'This is hammersmithOne from Google Font',
   style: GoogleFonts.getFont('hammersmithOne'),
   // style: TextStyle(fontFamily: 'hammersmithOne') <-- This can also be used.
),

注意:在应用程序级别更改Google字体

如果您希望字体在整个应用程序中更改,请使用以下代码:

MaterialApp(
    theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: GoogleFonts.hammersmithOne(
      Theme.of(context).textTheme,
    ),
   // fontFamily:'hammersmithOne' <-- this can also be used
  ),
  home: GoogleFontDemo(),
);

相关问题