在Flutter中使用自定义字体,等宽字体

## 1.使用场景

音乐播放进度展示,播放过程中当前时间变化,由于时间的位数和各数字之间的宽度不固定,导致中间的进度条位置会抖动。

![](images\播放进度不等宽.png)

在Flutter中使用自定义字体,等宽字体


 

 

## 2.使用开源的自定义字体

在定义TextStyle对象时,有一个fontFamily属性,就是用于配置Text的字体。

```

TextStyle timeMonospaceStyle = TextStyle(

color: Colors.black,

fontSize: 13,

fontFamily: '***',

);

```

那么自定义的字体可以从哪里获取呢?

Google有一个开源字体网站,里面包含有各种开源免费的字体,就是https://fonts.google.com/(绿色上网),在其中的Categories选择等宽字体(Monospace),就能在筛选结果中进行选择合适的字体。

<img src="images\Google等宽字体.png" style="zoom:80%;" />

 

在Flutter中使用自定义字体,等宽字体

在字体的详细介绍页下方可以看到它的开源协议授权信息

![](images\字体的开源协议.png)

在Flutter中使用自定义字体,等宽字体


 

 

## 3.项目中引入字体使用

经过对比选择了CourierPrime等宽字体,下载了它的ttf文件CourierPrime-Regular.ttf,放到flutter项目的assets/fonts目录下,这个ttf文件占用了67KB的大小。在yaml中配置字体

```

fonts:

- family: CourierPrime # 等宽字体

fonts:

- asset: assets/fonts/CourierPrime-Regular.ttf

```

然后在UI界面中引用

```

// 时间使用等宽字体

TextStyle timeMonospaceStyle = TextStyle(

color: skinColor().musicTime,

fontSize: 13,

fontFamily: 'CourierPrime',

);

```

## 4.效果

使用了等宽字体后,数字的变动不会引起Text宽度的变动。

![](images\播放进度等宽.png)

在Flutter中使用自定义字体,等宽字体

上一篇:大众点评数字的字体反爬


下一篇:【Vmware】vapp 综述