## 1.使用场景

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


 

 

## 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%;" />

 

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


 

 

## 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宽度的变动。