程序员都爱用这些字体写代码！

于很多编程人员来说，有些字体写出来的代码，不仅看起来赏心悦目，而且写代码的时候非常方便。但是很多程序员都是使用编辑器所默认的字体，这样写出来的代码，不仅千篇一律，而且枯燥无味。下面我们就来看看，究竟哪些字体写出来的代码更美观，哪些字体更适合写代码!

1.字母的宽度一致

或称为等宽字体，由于代码文件是普通文本，不带样式的，所以宽度一致易于排列和对齐，能迅速找到位置，提高可读性。

印刷术中这种等宽字体称之为monospaced字体，他是字体中的一个大分类(family)，如常见的Courier和Courier New。由于考虑到现在的多语言环境，在不同的系统中，要将这个字体在不同字符集下映射到不同的具体字体上去，比如，一般我们的系统都会把中文的映射到“宋体”上。

2.轮廓清晰规则

只有清晰和规则的外形才能迅速分辨不同的字符，并且在长时间的阅读下不容易感觉到疲劳

在这里要说的是，西方人和东方人在对字体大小上的不同，我认识一些老外，写程序的时候喜欢使用10px的字体来显示代码，而且使用的屏幕分辨率还很高，这是因为他们的文字是字母文字，每个字母的细节少，使用小字体可以在一个屏幕上显示更多内容。所以使用具有清晰和规则的字体，在字体较小的情况下，依然能在屏幕上快速分辨。

3.l，1，i易于分辨

0，o，O易于分辨

前三个是小写L，数字1和小写I，后三个是数字0，小写o和大写O，这几个字母在代码中常容易混淆。

例如，C风格的代码中，长整型数字要在数字后加后缀L来表示，像“111111111111L”，一般我们推荐都是使用大写的“L”目的就是为了防止混淆，而如果字体中这3中字母可以很容易分辨，那么即使我们误打成了小写l，也不会混淆。

4.清晰易分辨的标点

标点在代码中也占了非常重要的部分，如果一个字体不能很好区分逗号“,”和句号“. ”，“:”和“;”，那么不能说是一个好字体，同样，“`”“’”也最好能是配对的形式，这在某些编程中常常用到。

5.选择哪种字体?

有了以上一些参考标准之后，我们来看一些常见的字体

6.宋体

所有的中文Windows系统都自带宋体，而且宋体同时又是一个中文字体，涵盖了几乎所有的字符，在某些特殊场合，需要同时出现中文和英文的代码时，会考虑直接使用宋体。宋体由于主要照顾中文字符，而中文字符是等宽的，所以在考虑英文字符的时候，也考虑为等宽的，宽度为中文字符的一半。但是宋体的点阵英文字体并不美观，由于有衬线，导致在屏幕上小字号时的可读性较低。“0”和“O”以及“l”和“1”的区分不是很完美。

7.Courier New

这个字体也是每个 Windows都会带的，字体很好看，除了o O 0的区别，也是很多人在编程中使用的。

8.Bitstream Vera Sans Mono

最后我要向大家推荐Bitstream Vera Sans Mono，以及他的衍生字体DejaVu Sans Mono——DejaVu扩展了一些Unicode中的字符。

这也是很多开发者推荐的字体，除了完全满足上面说的所有条件之外，又是TTF字体，基本字形是无衬线的，适合屏幕阅读，最重要的还是开源的字体!

9.Consolas

微软新开发的字体，Vista、Office2007、Visual Studio 2005中包含它。既然是MS出品，则肯定在ClearType下效果最佳。不过官方网站的安装包很累赘，还需要先安装.net framework 3.5。

10.MONACO

这款字体的功效，相信不要小编介绍，很多程序员都很爱用。

在某网站上，有人问过这样的问题：有哪些适合用于写代码的西文字体?下面是很多网友的回复:

1.网友A

易于分辨单词中的每个字母或数字，防止变量\函数名打错(如：“0”、“o”和“O”，“1”、“I”和"l"等)

数字部分等高(这个可以讨论)。

代码中大量出现的符号(如 # % $ * \)与字母混杂在一起不太丑。

引号易于辨识，两个单引号「''」和一个双引号「"」区别尽量明显。

有些环境中要求字体等宽，代码需要对齐。

支持中文显示，因为在matlab中搞不定。

2.网友B

Ctrl+F了一下，真的没有人用 InputMono 吗……

Input: Fonts for Code

3.网友C

我最喜欢的是 Adobe 发布开源字体 Source Code Pro.这个字体网上可以下载到,我最喜欢 bold 加粗版.现在windows 的IDE,都被我改成这个字体了.

搜索应该能找到,如果找不到,可以问我要哈.

最喜欢的地方是字体自带定制 line-height。

4.网友D

Rio 说的那几个除了 Consolas 好像 Windows 下都没有。

Mac OS X 和 Linux 我不熟悉，个人认为 Windows 下 Consolas 是最好的选择。支持 ClearType，比较好看，斜体尤其优雅;只是我觉得它的标点太一般了。

Courier new 挺经典的，非常漂亮，我很喜欢它的标点，尤其是分号的那个小圆点，非常性感;但是太细了，斜体不如 Consolas 的好看。

5.网友F

我喜欢把不同的环境配成不同的字体，这样一眼就能看出来是debugger，是readonly viewer，还是主力IDE。另外，我还有一个经验是，主力环境中写完代码以后，换个viewer和另一种字体来审阅代码，很容易发现问题

目前的我的主力编程环境用的是Droid Sans Mono，优点在于朴实但是又不过于朴实，不像Monaco、Consolas那样有跳动感，又比Menlo平淡一点点。

6.网友G

以前写js 用微软雅黑。。。。后来写coffee，不得已必须用等宽字体，换成inconsolata，话说我之前老是觉得等宽字体写出来的代码宽度太宽了，看着难受。现在有coffee这么简介的语言，总算看起来还算舒服。

7.网友H

consolas 基本所有机器上都有。

以前用过Courier New。

8.网友I

Fixedsys字体是挺特殊的一种字体，因为这款字体中每个字体的宽度都是固定的，字体感觉特别的坚固，即便是一个小小的点，显示的也很清晰，所以特别适合显示一些代码。

Fixedsys字体的大小不可更改，所以在网页中妄想使用CSS的font-size来改变Fixedsys字体的大小是不可能的，当然在一些图形软件里就另当别论了。

Fixedsys不是True Type字体，一些程序如VS2010文本编辑器不支持非True Type字体，于是有人制作了这款Truetype版的Fixedsys字体(Fixedsys Excelsior)可以用于所有程序显示。

Fixedsys字体大小在12时显示最佳效果。

从上面大家的回答来看，每个程序员的爱好和审美观不一样，喜欢的字体也不一样。所以说也不一定别人喜欢什么，自己也喜欢什么。不过如果你不喜欢编辑器默认的字体，还是可以换一下字体，也许会有不一样的发现也不一定!

文章来源：知乎

公众号：w3c技术教程

提供专业的web技术教程、手册、工具。

体效果

<h1></h1> 标题字(最大)

<h6></h6> 标题字(最小)

<strong></strong> 粗体字(突出强调)

<b></b> 粗体字(bold:粗体)

<i></i> 斜体字(italic:斜体)

<u></u> 底线,文本添加下划线：(underline:下划线)

<strike></strike>或<s></s> 横线,相当于加删除线文本 <del></del> HTML5

等宽文字标签:对于等宽文字设置多数情况用在英文文字显示中

<tt></tt> 打字体,类似打字机或者等宽的文本效果。

<code></code> 等宽文字设置内容(定义计算机代码文本)

<samp></samp> 等宽文字设置内容(定义样本文本)

<kbd> 定义键盘文本。

<sup></sup> 文字上标字体标签(super)

<sub></sub> 文字下标字体标签(subscipt)

<address></address> 设置地址文字(可定义一个地址,比如电子邮件地址。您应当使用它来定义地址、签名或者文档的作者身份。)

<font></font> 编辑网页文字样式

<font face="" size="" color=""></font>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是3。

color用于设置字体的颜色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手册上没有

<ruby></ruby>和<rt></rt> 设置文字标注标记

实例:

<ruby>当代最可爱的人<rt>志愿军</rt></ruby>

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

天不言而四时行，

地不语而百物生。

- 2024.03.11 -

在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。

今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。

一、认识基本字体标签

语法结构：<标签属性=“值”> 内容 </标签>

标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。
标签可以有属性，属性必须有值(align=“center” )。
开始标签与结束标签中包含的内容称之为区域。
标签不区分大小写，p和P是相同的。

1、标题标签< h1> - < h6>

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。

标题标签是块元素

示例：

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

2、字体标签<font>

在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。

例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：

<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>

这行代码的意思是：

<font> 开始一个字体样式的定义。
color="red" 设置字体颜色为红色。
size="5" 设置字体大小为5。
face="Arial" 设置字体类型为Arial。
这是红色Arial字体的文字是我们要显示的文字。
</font> 结束字体样式的定义。

注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。

3、字号大小：<font size="n">

字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。

例如：

<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>

运行结果：

不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。

4、粗体标签

<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。

<p><b>这是加粗的文本</b></p>

<strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。

<p><strong>这是重要的文本</strong></p>

但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。

5、斜体字标签

<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。

<p><i>这是斜体的文本</i></p>

<em>：与<i>标签类似，<em>标签也用于表示斜体文本。

<p><em>这是强调的文本</em></p>

但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。

6、删除字标签

<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。

<p>原价：<del>100元</del></p>
<p>现价：80元</p>

运行之后是这样子的：

在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。

7、文本格式化标签 < div> < span>

< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>

<div>标签可以看出是一个盒子容器，这里面可以放别的标签。
<div>标签是一个块元素。

如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。

< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>标签不同于<p>标签是一个行内元素（不独占一行）。

8、其它字体标签

<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。

<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。

<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。

二、总结与建议

尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。

使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。

因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。

总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

在线咨询

上一篇：HTML5中video标签如何使用
下一篇：Web前端入门新人必看，怎样使用CSS修改HTML的样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

程序员都爱用这些字体写代码！

一、认识基本字体标签

二、总结与建议

您的项目需求