前言

在做 Statistics Counter 时, 发现总是会跳, 研究后才发现原来是等宽搞的鬼, 这篇就来说说等宽字体.

参考

等宽字体在web布局中应用以及CSS3 ch单位嘿嘿

不等宽字体

不等宽指的是, 不同字母的 width 不一样.

游览器默认的字体 Times New Roman 就是不等宽字体

 

不管是字母还是数字, 不同字符宽度都不一致.

半等宽字体

Material 的 Roboto 算是半等宽字体.

 

它的字母是不等宽的, 但是数字是等宽的. 这也是为什么许多人会特意拿 Roboto 做数字的 font-family.

等宽字体

Roboto Mono 就是完全的等宽字体

 

字母和数字的宽度都是一致的.

等宽字体列表: List of monospaced typefaces, 大部分后面有加 Mono 的都是等宽字体 (但也不是 100% 啦)

游览器等宽字体

如果不想引入 roboto 的话, 可以用游览器自带的 monospace. 参考: CSS Web Safe Font Combinations, CSS Web Safe Fonts

ch unit

1ch 等于一个字符 "0" 的宽度. 如果字体是等宽字体, 那么可以说 10 ch 就等于 10 个字符的 width.

但如果不是等宽字体, 那么 ch 就不准了. 所以要谨慎使用哦.

CSS – Monospaced font & ch unit 等宽字体与 ch 单位的更多相关文章

  1. CSS 条件判断、等宽字体以及ch单位

    <!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8"> ...

  2. ch 与等宽字体

    难题 有的时候,特别想通过字符来判断元素的长度,比如: 多行文本溢出时,文字变省略号 文字一个个的显示 效果分别如下: 第一种情况下,如果可以通过字符的数量判断长度是否溢出,从而把最后几个字符替换成省 ...

  3. 字体：等宽字体与比例字体 - Monospaced font & Proportional font

    字体:等宽字体与比例字体 - Monospaced font & Proportional font 量子波儿 2013-08-24 16:54:12 7101 收藏 1分类专栏: 计算机常识 ...

  4. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  5. css中 font常用的样式属性

    今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型:    如: font-family:宋体; 2)字体大小 语法:font-size: ...

  6. netbeans等宽字体却不支持中文

    一直用netbeans,各方面都很满意,就是这字体十分不爽,如用等宽字体却不支持中文,百度了一下,找到了解决办法,贴出来,给需要的朋友. 01.找到自己java字体目录.我的目录是[C:\Progra ...

  7. 等宽字体的妙用-loading 点点点动画

    原理 ch等宽字体 + text-indent 动画负缩进 显示效果如 loading . loading .. loading ... loading . loading .. loading .. ...

  8. css 14-CSS3属性详解：Web字体

    14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...

  9. 利用private font改变PDF文件的字体

    利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...

  10. 编程等宽字体Source Code Pro(转)

    Source Code Pro - 最佳的免费编程字体之一!来自 Adobe 公司的开源等宽字体下载     每一位程序员都有一套自己喜爱的代码编辑器与编程字体,譬如我们之前就推荐过一款"神 ...

随机推荐

  1. webpack4.15.1 学习笔记(三) — 模块热替换HMR

    目录 模块热替换 HMR HMR监听文件变化 HMR 修改样式表 模块热替换 HMR 允许在运行时更新各种模块,而无需进行完全刷新.不适用于生产环境,意味着应当只在开发环境使用.启用HMR实际上就是更 ...

  2. ERP中内部批号和外部批号分别指的是什么

    在企业资源计划(ERP)系统中,内部批号和外部批号是两个用于标识和跟踪产品的关键概念.它们通常用于管理和追踪生产.库存和供应链中的物料. 内部批号(Internal Batch Number): 定义 ...

  3. [oeasy]python0010_hello_world_unix_c历史迷因

    ​ Hello World! 回忆上次内容 我们这次设置了断点 设置断点的目的是更快地调试 调试的目的是去除 ​​bug​​ 别害怕 ​​bug​​ 一步步地总能找到 ​​bug​​ 这就是程序员基本 ...

  4. 个人使用 sudo 方法

    sudo 作用:允许 系统管理员 授予某些用户或用户组以 其他用户身份 运行某些或所有命令的权限 su 用于变更为其他使用者的身份的命令,一般需要键入该使用者的密码 sudo 则是对 su 使用的简化 ...

  5. 辅助分类器生成对抗网络（ Auxiliary Classifier Generative Adversarial Network，ACGAN）（附带pytorch代码）

    1 ACGAN基本原理 1.2 ACGAN模型解释 ACGAN相对于CGAN使的判别器不仅可以判别真假,也可以判别类别 .通过对生成数据类别的判断,判别器可以更好地传递loss函数使得生成器能够更加准 ...

  6. python selenium元素定位

    1.ID元素定位基于元素属性中的id的值来进行定位,id是一个标签的唯一属性值可以通过id属性来唯一定位一个元素,是首选的元素定位方式,动态ID不做考虑.driver .find_element_by ...

  7. 通过程序名称kill掉所有的进程

    通过程序名称kill掉所有的进程 今天差点把服务器搞崩了. 脚本的循环条件有问题,结果起了无数的nslookup,用pkill杀不掉,只能用kill一个个解决,服务器还被搞得慢得要命. 还好又黄队长, ...

  8. Jmeter函数助手33-split

    split函数用于根据分隔符拆分传递给它的字符串,并返回原始字符串. String to split:填入需要转换的字符串 函数名称.用于存储在测试计划中其他的方式使用的值:存储结果的变量名 Stri ...

  9. SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的，不要乱点鸳鸯谱

    开心一刻 今天跟我姐聊天 我:我喜欢上了我们公司的一个女同事,她好漂亮,我心动了,怎么办 姐:喜欢一个女孩子不能只看她的外表 我:我知道,还要看她的内在嘛 姐:你想多了,还要看看自己的外表 背景介绍 ...

  10. 【MySQL】重装Win10系统后恢复MySQL

    因为种种原因把系统重装了,安装的MySQL不在C盘中,所以数据不会被系统格式化掉 但是重装系统就把之前CMD声明的MySQL服务给删除了 要让MySQL重新跑起来,就需要重新安装服务 恢复MYSQL博 ...