等宽字体推荐

title: 等宽字体推荐 id: dccbed84804b619fb89c17d2a75011b9 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

等宽字体推荐

开发一些数据展示类页面，比如资产列表，股票的加个列表、盘口等等，会展示大量的数字，一列列的排下来，但如果明明相同位数的数字，看上去且没有对齐，就会比较令人恶心了。

下面展示了四种字体，其中后面几种是我自己找的两个比较好看的等宽字体，可以看一下对比效果，下载心仪的等宽字体，或者直接自己再从网上下载都行。

注意，普通字体我没有指定，默认使用的是浏览器默认字体，如果浏览器默认字体本身就是一种等宽的，可以就看不出对比效果了。。。

如果查看没有效果，应该就是文档问题，可以看后面这个链接去看效果：Demo效果展示

字母数字等宽字体

普通字体，理应为一种非等宽字体

123456789.999999999
111111111.111111111

使用系统自带的等宽字体

123456789.999999999
111111111.111111111

使用自己下载的等宽字体文件 —— aequilate-font.ttf

123456789.999999999
111111111.111111111

另一个使用自己下载的等宽字体文件 —— aequilate-font-2.woff2

123456789.999999999
111111111.111111111

css代码

/* 引用字体并给字体命名 */
@font-face {
  font-family: aequilate; /* 稍后直接使用这个名字，作为 font-family即可 */
  src: url('./assets/aequilate-font.ttf'); /* IE9+ */
  font-weight: 100;
}
/* 引用字体并给字体命名 */
@font-face {
  font-family: aequilate2; /* 稍后直接使用这个名字，作为 font-family即可 */
  src: url('./assets/aequilate-font-2.woff2'); /* IE9+ */
  font-weight: 100;
}
.font-aequilate {
  font-family: aequilate;
}
.font-aequilate2 {
  font-family: aequilate2;
}
.font-monospace { /* 系统提供的等宽字体 */
  font-family: monospace;
}