专栏首页练小习的专栏比例字体&等宽字体

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional font)则是固定宽度,固定间距,字体的每一个字母和字符所占的水平空间都是相同的。

比例字体:是指字符宽度存在变化的字体,在传统西文活字印刷中使用的铅字,如小写字母的i, j和w,m的字符宽度是不一样的,但是这样做可以提高单词的可读性,这在铅字制作设计上称为比例字体。近年来制作的比例字体中,一般都会包含有较多的间距调整、斜体修正、合体字等信息 。 等宽字体:早期的打字机、电脑屏幕由于技术的限制,不能自动显示比例字体,因而最先出现的是等宽字体。它指的是字符宽度相同的一类字体。这里要注意的一点是,中英文宽度应该不是相同而是成整数倍关系——一般来说中文字符在这些字体中的宽度是英文字符的两倍。

两者区别:它们的关键差别主要是在阅读上,显然比例字体使单词的整体可读性增强了,比如我们最常用的kindle。

不过,即便到今天,等宽字体也还有它一定的使用优势,比如命令行、打字机效果、又或者程序猿常常会拿它来显示代码。

接下来我们看看他们跟web又有 什么关系:

代码阅读

之前有提到过代码显示一般是用到等宽字体,是为了方便阅读,其实在有些情况下,不一定,比如下面这种字母错误的情况,如果是等宽字体,查阅起来就没有那么容易,好在编辑器有高亮错误提示。

HTML标签

UI开发熟悉的html标签< code>,它是用于表示计算机源代码或者其他机器可以阅读的文本内容。通常将标签内的文本变成等宽字体,表示这段文本是源程序代码。< code>标签是一个短语标签,用来定义计算机代码文本。

当然不光是< code>标签,还有< pre>,预格式化文本,任何位于< pre>开标签和< /pre>闭标签之间的文本都会保持其在源文件中的格式。大多数浏览器默认会使用等宽字体显示这种文本(Courier字体就是一个等宽字体的例子,每个字母占用相同的宽度 )。< pre>元素最常用于显示计算机源码。

CSS单位

还有一个与等宽字体有关的css单位:ch

它是以字符0的宽度为基准, 另外一个单位ex是以小写字符x的高度为基准,当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。

我们可以测试一下这个ch单位,当们把宽度设置为2ch的时候的表现是怎样:

总结:不同于比例字体,等宽字体具有相同的宽度字符。这种特点让它更易于阅读,拥有较高的统一性和一致性。也因为它简单、连贯和实用,常常受到设计师和开发者的亲睐。

下面是一些关于等宽字体的资源:

https://en.wikipedia.org/wiki/Samples_of_monospaced_typefaces

https://www.fontsquirrel.com/fonts/list/classification/monospaced

http://www.1001fonts.com/monospaced-fonts.html

https://www.typewolf.com/top-10-monospaced-fonts

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 今天写了个蛋疼的弧形轮播图,怎么说也是原创了

    看到一个弧形轮播图的设计稿,脑子里突然闪现出一个蛋疼的实现方式,轮播的脚本就不用说了,我的HTML结构,恩,就是这样的: <!DOCTYPE html> <ht...

    练小习
  • JS的各种排序算法实现

    一些排序算法 var Sort = {} Sort.prototype = { // 利用sort进行排序 systemSort:...

    练小习
  • 前端与视觉设计需要交流的几点问题

      在实际工作中,可能会由于设计师的经验不足,以及对前端技术的不了解,而产出一些对前端来说,无法实现,或者实现成本很高的视觉设计图。在这里罗列一下我所了解的各种...

    练小习
  • 字体侵权怕不怕,免费商用来一波~

    很多小伙伴把字库的字体商用也是常有的,可能是没有版权意识,也可能是抱有侥幸心理,如果造成巨大经济损失,往往得不偿失。

    崔庆才
  • 前端生僻字显示

    异名在一个游戏项目中遇到一个比较有意思的问题,在游戏的玩法设定中,当怪物在消失的时候会爆出一个中文字,这个效果在部分机型上会出现乱码符号

    异名
  • 样式问题-如何一次性设置网站英文字体样式,中文字体等样式

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 今天才发现,CSS 的 font-fami...

    逸鹏
  • VOSviewer中文视频教程

    因为这一篇文章,是我和几个研究生一起合作的。作者这一栏,最大可以写8个汉字。我让他们几个商议,选贡献度最高的2个人署名。结果他们头脑风暴的结果,就是起了个“V字...

    王树义
  • Android 实现按两次返回键退出程序(两种方法)

    原理很简单:定义一个TimerTask定时器和一个是否退出程序的标识isExit,第一次按返回键,赋值isExit标识为true,开启定时器TimerTask ...

    砸漏
  • 云数据中心下的光网络

    引子 过去的10年是互联网高速发展的10年,随着产业的不断发展,应用种类极大丰富,用户规模空前庞大。往往一个应用就拥有千万级别用户,上P数据量。在这样的环境下,...

    鹅厂网事
  • WGCNA:加权基因共表达网络分析

    加权基因表达网络分析(Weighted gene co-expression network analysis, WGCNA),又叫权重基因共表达网络分析,其根...

    Y大宽

扫码关注云+社区

领取腾讯云代金券