Best CSS Fonts

本文将介绍最佳 CSS 字体。

字体是创建视觉吸引力网页的重要组成部分。最佳字体应该易于阅读、网络安全、在不同设备或浏览器上可见，并能正确地向受众传达信息。

在选择合适的关键字时，事情并非那么简单。有时，视觉吸引人的字体可能不是网络安全的。

网络安全字体是指已经安装在大多数操作系统中的字体。如果字体是预先安装的，那么它们就会按照我们想要的方式呈现。

CSS 字体有不同的种类，如下所示：

无衬线字体 (Sans-Serif)

这种字体是一种字面风格，简洁明了。它不像衬线字体那样带有装饰性的笔画。它具有干净现代的外观，通常用于编写数字内容，因为它清晰易读。

草书 (Cursive)

这类字体模仿人类手写，其中每个字符都以流畅的方式连接到另一个字符。它为网页增添了装饰感。

衬线字体 (Serif)

这类字体是一种字面风格，其字符的角落带有装饰性笔画。这些装饰性笔画称为衬线。它优雅、传统且正式，用于小说、奇幻等。

大多数网站在正文中常用衬线字体，因为它是一种非常易读的字体。

等宽字体 (Monospace)

这是一种等宽字面字体，其中字符的宽度相同。这些字体干净且一致，因此它们是默认字体。

脚本

这种字体是通过手写创建的。这种字面风格用于显示打印。

在 CSS 中，我们使用 font-family 属性来将字体应用于文本。

无衬线字体 (San-Serif Fonts)

以下是网络安全的无衬线字体：

Arial

这是一种无衬线字体，用于广告和报纸。它是一种粗体字体，在任何尺寸下都显得清晰易读，这就是为什么 Google Docs 的默认字体是 Arial。

演示

我们将创建代码来展示Arial字体。

代码

输出

我们可以在下面的输出中看到文本的Arial字体。

Arial Narrow

Arial 字体家族包含各种字体样式，Arial Narrow 是其中之一。它设计优雅，字符狭窄。它还包含较少的字符间距。

演示

我们将编写代码来显示Arial Narrow字体。

代码

输出

我们可以在下面的输出中看到文本的Arial Narrow字体。

Helvetica

这是一种著名的无衬线字体，其原始名称是 Neue Haas Grotesk。它由瑞士字体设计师 Max Miedinger 和 Eduard Hoffmann 创作。

演示

我们将编写代码来显示Helvetica字体。

代码

输出

我们可以在下面的输出中看到文本的Helvetica字体。

Arial Black

这是一种著名的无衬线字体，适合显示任何类型的内容。

演示

我们将编写代码来显示Arial Black字体。

代码

输出

我们可以在下面的输出中看到文本的Arial Black字体。

Verdana

这是一种人文主义无衬线字体。由 Matthew Carter 为 Microsoft Corporation 设计。它的设计使其即使在小尺寸下也易于阅读。

演示

我们将编写代码来显示Verdana字体。

代码

输出

我们可以在下面的输出中清楚地看到文本的Verdana字体。

Tahoma

这是一种人文主义无衬线字体，由 Matthew Carter 设计。它为 Microsoft Corporation 创建。它与 Verdana 字体相似，但 Tahoma 字体的主体更窄。字母之间的间距更小，字母的面积也更小。

演示

我们将编写代码来显示Tahoma字体。

代码

输出

我们可以在下面的输出中看到文本的Tahoma字体。

Trebuchet MS

这是一种人文主义无衬线字体。由 Vincent Connare 为 Microsoft Corporation 设计。它用于窗口标题。

演示

我们将编写代码来显示Trebuchet MS字体。

代码

输出

我们可以在下面的输出中看到文本的Trebuchet MS字体。

影响

这是一种著名的无衬线字体，由 Geoffrey Lee 于 1965 年创建。它的设计旨在给用户留下深刻印象。它具有较高的 x 字高、较短的升部和更短的降部以及卷曲的字母形状。这种字体的小写字母很难阅读，因此不适合用作正文。相反，它旨在用于标题和显示。

演示

我们将编写代码来展示Impact字体。

代码

输出

我们可以在下面的输出中看到文本的Impact字体。

Gill Sans

这是一种著名的无衬线字体，由 Eric Gill 制作。于 1928 年由 Monotype 的英国分支发布。

演示

我们将编写代码来展示Gill Sans字体。

代码

输出

我们可以在下面的输出中看到文本的Gill Sans字体。

衬线字体 (Serif fonts)

以下是网络安全的衬线字体：

Times New Roman

这是一种衬线字体，由 Stanley Morison & Victor Lardent 设计，并由一家英国报纸委托制作。这种字体是为名为“The Times”的报纸设计的。它具有强烈的文字颜色，在页面上清晰可见。它具有较高的 x 字高、紧凑的外观和较短的降部，以便能够紧密排版。

演示

我们将编写代码来显示Times New Roman字体。

代码

输出

我们可以在下面的输出中看到文本的Times New Roman字体。

Palatino

这是一种旧式衬线字体，由 Hermann Zapf 设计。它用于标题、展示印刷和广告。它具有宽阔的结构、宽阔的字腔和粗体字母。它的设计使得其小尺寸字母在远处阅读报纸时也能清晰可见。

演示

我们将编写代码来显示Palatino字体。

代码

输出

我们可以在下面的输出中看到文本的Palatino字体。

格鲁吉亚

这是一种衬线字体，由 Matthew Carter 于 1993 年设计。这种字体受到了 19 世纪苏格兰罗马式设计的启发。其设计包含粗细交替的笔画、垂直轴和球形终端。它旨在提高在计算机系统上的清晰度，以便即使字体尺寸很小，字母也应该可见。

演示

我们将编写代码来展示Georgia字体。

代码

输出

我们可以在下面的输出中看到文本的Georgia字体。

Baskerville

这是一种传统的衬线字体，由 John Baskerville 于 18 世纪 50 年代在英国设计。其设计特点是字母尖锐且锥形，圆角的轴线向更垂直的位置移动。

演示

我们将编写代码来显示Baskerville字体。

代码

输出

我们可以在下面的输出中看到文本的Baskerville字体。

等宽字体 (Monospace fonts)

以下是网络安全的等宽字体：

快递

这是一种等宽粗衬线字体，由 Howard "Bud" Kettler 设计。它用作计算机字体。

演示

我们将编写代码来显示Courier字体。

代码

输出

我们可以在下面的输出中看到文本的Courier字体。

Monaco

这是一种等宽无衬线字体，由 Susan Kare 和 Kris Holmes 设计。其设计特点是高括号曲线和方括号的宽度。

演示

我们将编写代码来显示Monaco字体。

代码

输出

我们可以在下面的输出中看到文本的Monaco字体。

Consolas

这是一种等宽字体，由 Luc(as) de Groot 创建。于 2007 年发布。它支持衬线数字、旧式数字、本地化形式、区分大小写形式、上标、下标等功能。

演示

我们将编写代码来显示Consolas字体。

代码

输出

我们可以在下面的输出中看到文本的Consolas字体。

草书字体 (cursive fonts)

以下是网络安全的等宽字体：

Brush Script MT

这是一种草书字体，由 Adobe Originals 的 Robert E. Smith 设计。其设计特点是粗重的文本，其小写字母看起来像是用画笔写成的。

演示

我们将编写代码来显示Brush Script MT字体。

代码

输出

我们可以在下面的输出中看到文本的Brush Script MT字体。

Mistral

这是一种随意的脚本字体，由 Roger Excoffon 在 1953 年创作。字体设计师根据他自己的手写体创作了这种字体。它具有非正式的图形质感，类似于墨水和画笔。它具有较长的降部。

演示

我们将编写代码来显示Mistral字体。

代码

输出

我们可以在下面的输出中看到文本的Mistral字体。

Comic Sans MS

这是一种无衬线字体，由 Vincent Connare 于 1994 年设计。此字体中的字母不与其他字母连接，并受漫画书字母的启发。它旨在用于卡通对话气泡和儿童材料。

演示

我们将编写代码来显示Comic Sans MS字体。

代码

输出

我们可以在下面的输出中看到文本的Comic Sans MS字体。

脚本字体 (Script fonts)

以下是网络安全的奇幻字体：

Forte

这是一种脚本字体，由奥地利商业艺术家 Carl Reissberger 于 1962 年创作。

演示

我们将编写代码来显示Forte字体。

代码

输出

我们可以在下面的输出中看到文本的Forte字体。

Freestyle Script

这是一种随意的脚本字体，由 Colin Brignall 于 1969 年创作。

演示

我们将编写代码来显示Freestyle Script字体。

代码

输出

我们可以在下面的输出中看到文本的Freestyle Script字体。

Old English Text MT

这是一种随意的脚本字体，由 Colin Brignall 于 1969 年创作。

演示

我们将编写代码来显示Old English Text MT字体。

代码

输出

我们可以在下面的输出中看到文本的Old English Text MT字体。

Papyrus

这是一种字体，由 Chris Costello 于 1982 年创建。它具有不规则的曲线、较高的水平笔画和粗糙的边缘等特点。

演示

我们将编写代码来显示Papyrus字体。

代码

输出

我们可以在下面的输出中看到文本的Papyrus字体。

Lucida Handwriting

这是一种字体，于 1992 年发布。该设计的主要目的是模仿使用马克笔的非正式草书手写。

演示

我们将编写代码来显示Lucida Handwriting字体。

代码

输出

我们可以在下面的输出中看到文本的Lucida Handwriting字体。

结论

在本文中，我们了解了最佳 CSS 字体。字体有多种类型，如草书、衬线、无衬线、等宽和脚本字体。我们通过示例研究了这些字体类型。