Flutter 不渲染 robotoFlex 字体字体粗细示例 Bold、W600、W700、W800、W900,
我在我的项目中使用 google_fonts,我不知道出了什么问题。它与其他字体(如 GoogleFont.lato 等)配合良好
字体比较
child: Text(
'GoogleFonts.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 17,
)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.w900)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.lato',
style: GoogleFonts.lato(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold)),
).pV(1).pH(20),
),
const SizedBox(
height: 35,
),
Center(
child: Text(
'GoogleFonts.robotoflex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 17,
)),
).pV(5).pH(20),
),
Center(
child: Text(
'This is GoogleF.RobotoFlex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.w900)),
).pV(1).pH(20),
),
Center(
child: Text(
'This is GoogleF.RobotoFlex',
style: GoogleFonts.robotoFlex(
textStyle: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold)),
).pV(1).pH(20),
),
这似乎是 GoogleFonts 包和相关字体的问题。如果你不使用 GoogleFonts 包,你也可以获得你想要的东西。
在此输入图像描述 步骤如下:
示例代码
// pubspec.yaml
//
fonts:
- family: RobotoFlex
fonts:
- asset: assets/RobotoFlex-VariableFont.ttf
// main.dart
//
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'RobotoFlex',
),
// widget code
//
Text(
'This is GoogleF.RobotoFlex',
style: TextStyle(
fontSize: 26,
fontVariations: <FontVariation>[FontVariation('wght', 200.0)],
),
),
),
Flutter 正在努力使用可变字体。仅支持正常字体粗细 <= 500 and bold >= 600。为了能够使用更多粗细,请使用以下方法:
flutter:
fonts:
- family: RobotoFlex
fonts:
- asset: assets/fonts/RobotoFlex-VariableFont.ttf
Text(
'This is RobotoFlex',
style: TextStyle(
fontFamily: 'RobotoFlex',
fontWeight: FontWeight.w900
),
)
Text(
'This is GoogleF.RobotoFlex',
style: TextStyle(
fontFamily: 'RobotoFlex',
fontVariations: [
FontVariation('wght', 900),
]
)
)
这应该会给你你预期的结果