css linux 等宽字体,比例字体等宽字体

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

d15921ac5b607bf6248ef4f36b412488.png

比例字体:是指字符宽度存在变化的字体,在传统西文活字印刷中使用的铅字,如小写字母的i, j和w,m的字符宽度是不一样的,但是这样做可以提高单词的可读性,这在铅字制作设计上称为比例字体。近年来制作的比例字体中,一般都会包含有较多的间距调整、斜体修正、合体字等信息 。

等宽字体:早期的打字机、电脑屏幕由于技术的限制,不能自动显示比例字体,因而最先出现的是等宽字体。它指的是字符宽度相同的一类字体。这里要注意的一点是,中英文宽度应该不是相同而是成整数倍关系——一般来说中文字符在这些字体中的宽度是英文字符的两倍。

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

e105ecdad9c74c3fd7eac256b891f4a8.png

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

b1f1f3a7c2172c5bbc5fb0f06f859581.png

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

代码阅读

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

7bebd0ec753bbc8a08f92ec1069934c4.png

HTML标签

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

151a213eb62c5b5e5b0acbdcd2928992.png

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

CSS单位

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

595f3ff37626f3d723550e85205ac133.png

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

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

05d87d7940c9980967fbdee782c021c9.png

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三星智能家居系统频繁故障 大批用户受到影响

Shelley Powers正在她密苏里州郊区的房子中鼾睡&#xff0c;突然警铃大作将她惊醒&#xff0c;在仔细排查之后&#xff0c;发现是虚惊一场&#xff0c;是安全传感器误报。在此之后的几周&#xff0c;她的三星Smart Things智能家居系统频繁出现故障&#xff0c;比如设定的灯具不…

适用于 .NET 的开源文本差异对比组件

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具或组件&#xff0c;希望对您有用&#xff01;简介对于开发人员来说&#xff0c;Git 是我们经常使用的工具&#xff0c;在每次编写完代码并提交后&#xff0c;我们可以通过 git dif…

box-shadow阴影合集

2019独角兽企业重金招聘Python工程师标准>>> * box-shadow可以设置6个值。其中4个可选&#xff1b;2个必须指定&#xff1a;分别是x轴偏移量和y轴偏移量&#xff0c;这2个值可以是正值&#xff0c;可以是负值&#xff0c;也可以是0&#xff0c;但不可以省略不写 阴影…

《数据科学R语言实践:面向计算推理与问题求解的案例研究法》一一2.5 为跨年度的个人参赛选手构造记录...

本节书摘来自华章计算机《数据科学R语言实践&#xff1a;面向计算推理与问题求解的案例研究法》一书中的第2章&#xff0c;第2.5节,作者&#xff1a;[美] 德博拉诺兰&#xff08;Deborah Nolan&#xff09;  邓肯坦普朗&#xff08;Duncan Temple Lang&#xff09;  更多章…

基于 abp 微服务架构的开源低代码平台

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具或组件&#xff0c;希望对您有用&#xff01;简介 ABP-MicroService是 一个基于ABP vNext微服务架构、vue-element-admin的后台管理框架&#xff0c;适用于大型分布式业务系统和企…

linux android sdk gengxinman,Android 实现增量更新

一、概述增量更新相较于全量更新的好处不言而喻&#xff0c;利用差分算法获得1.0版本到2.0版本的差分包&#xff0c;这样在安装了1.0的设备上只要下载这个差分包就能够完成由1.0-2.0的更新。比如&#xff1a;存在一个1.0版本的apkapk1.png然后需要升级到2.0版本&#xff0c;而2…

Pycharm上Django的使用 Day8

2019独角兽企业重金招聘Python工程师标准>>> 1.添加新条目 1>编写用于添加新条目的表单 在forms.py中创建一个与模型Entry相关联的表单 1处给字段text指定一个空标签 2处定义小部件widgets,widgets是一个HTML表单元素 2>定义new_entry的URL模式 在用于添加新条…

物联网创新领域的三大驱动性趋势

从设备对接到区块链&#xff0c;今天我们将介绍几项物联网开发者必须了解的最新技术趋势。 物联网正在快速改变着我们的工作与生活方式。过去十年以来&#xff0c;利用惟一IP地址实现联网早已不是难事&#xff0c;但传感器、处理器以及其它多种新兴技术的涌现真正让物联网走向了…

TensorFlow.NET 实战 -- 为.NET开发者开启机器学习之旅

在IT技术飞速发展的今天&#xff0c;云计算、人工智能、大数据和云原生应用等新兴技术的发展为我们带来一波又一波的浪潮&#xff0c;也对软件开发者提出了更高的要求&#xff0c;特别是人工智能开发领域&#xff0c;应运而生的新概念让人目不暇接。作为一个.NET开发者的你&…

Arduino I/O Expansion Shield V7.1

介绍&#xff1a; 传感器扩展板&#xff0c;目的是为初学者省去繁琐的面包板接线和故障排除&#xff0c;专注实现自己的创意想法。 扩展板V7.1不仅保留老版本的所有优点&#xff0c;改善了它的易用性&#xff0c;更重要的是它兼容Arduino新一代主控器DUE。现在V7.1以其强大的扩…

简单的单臂路由的配置实验 (思科)

实验名称&#xff1a;简单的单臂路由的 配置实验 &#xff08;思科&#xff09;实验拓扑&#xff1a; 实验需要&#xff1a;1、按图中所示配置设网络备vlan&#xff0c;IP地址2、能够使各pc互相ping通。 实验步骤&#xff1a; 1、配置终端设备&#xff1a;pc1-pc5按照拓扑图中所…

【Redis源码分析】Redis命令处理生命周期

运营研发团队 李乐 前言 本文主要讲解服务器处理客户端命令请求的整个流程&#xff0c;包括服务器启动监听&#xff0c;接收命令请求并解析&#xff0c;执行命令请求&#xff0c;返回命令回复等&#xff0c;这也是本文的主题“命令处理的生命周期”。 Redis服务器作为典型的事件…

GDB调试qemu-kvm

GDB调试qemu-kvm 前面几篇博文都是记录一些kvm相关包编译安装及使用&#xff0c;但都没深入去代码看看。看源码在配合上相关原理才能更好的理解kvm。但qemu-kvm的代码量很多&#xff0c;对我来讲直接看源码收获甚少&#xff0c;所以找了个调试工具——GDB来配合阅读代码。接下来…

用.NET设计一个假装黑客的屏幕保护程序

本文主要介绍屏幕保护程序的一些相关知识&#xff0c;以及其在安全方面的用途&#xff0c;同时介绍了如何使用 .NET 开发一款屏幕保护程序&#xff0c;并对核心功能做了介绍&#xff0c;案例代码开源&#xff1a;https://github.com/sangyuxiaowu/HackerScreenSaver背景前几天在…

【IntelliJ】IntelliJ IDEA常用设置及快捷键以及自定义Live templates

IntelliJ IDEA是一款非常优秀的JAVA编辑器&#xff0c;初学都可会对其中的一些做法感到很别扭&#xff0c;刚开始用的时候我也感到很不习惯&#xff0c;在参考了网上一些文章后在这里把我的一些经验写出来&#xff0c;希望初学者能快速适应它&#xff0c;不久你就会感觉到编程是…

c语言时钟报告,C语言图形时钟课程设计实验报告

C语言图形时钟课程设计实验报告 目录1.系统功能要求。2. 数据结构设计及说明。3.程序结构(画流程图) 。4.各模块的功能。5.试验结果(包括输入数据和输出结果) 。6.体会。7.参考文献。8.附录&#xff1a;程序清单及源程序。 系统功能要求&#xff1a;在屏幕上显示一个图形时钟…

微软发布 2023 财年第一季度财报:营收达 501 亿美元,同比增长 11%

北京时间 2022 年 10 月 26 日——微软发布 2023 财年第一季度财报。财报显示&#xff0c;截止到 2022 年 9 月 30 日&#xff1a;营收达到 501 亿美元&#xff0c;增长 11%&#xff08;按固定汇率计算增长 16%&#xff09;运营收入为 215 亿美元&#xff0c;增长 6%&#xff0…

《图解CSS3:核心技术与案例实战》——1.3节渐进增强

本节书摘来自华章社区《图解CSS3&#xff1a;核心技术与案例实战》一书中的第1章&#xff0c;第1.3节渐进增强&#xff0c;作者 大漠&#xff0c;更多章节内容可以访问云栖社区“华章社区”公众号查看 1.3 渐进增强第一次听到“渐进增强”&#xff08;Progressive Enhancement…

阿里云云主机搭建网站攻略 - 云翼计划

阿里云服务器&#xff08;云主机&#xff09;搭建网站攻略 - 云翼计划 提示&#xff1a;此搭建攻略为2017版本&#xff0c;阿里云未跟新前。 最新搭建攻略请前往 Amaya丶夜雨博客 / 最新个人博客 https://www.amayaliu.cn 支持一下哦&#xff0c;谢谢。&#xff08;9.5一…

记一次 .NET 某医疗器械 程序崩溃分析

一&#xff1a;背景 1.讲故事前段时间有位朋友在微信上找到我&#xff0c;说他的程序偶发性崩溃&#xff0c;让我帮忙看下怎么回事&#xff0c;上面给的压力比较大&#xff0c;对于这种偶发性崩溃&#xff0c;比较好的办法就是利用 AEDebug 在程序崩溃的时候自动抽一管血出来&a…