您可以在网站中使用的 5 种网络安全字体

已发表: 2020-10-07

如果您是网站所有者,那么您应该知道 HTML 字体在您的网站中起着重要作用。 所有网站都有一种或另一种形式的文本内容,如果选择正确,好的字体可以增加页面的美感并对内容的可读性产生积极影响,这就是为什么网站的设计和开发确实是其中之一启动任何业务的最重要方面。 不良字体会对套件的性能产生负面影响,这完全取决于您是否使用网络安全字体。

目录显示
  • 什么是网络安全字体?
  • 为什么 Web 安全字体很重要?
  • 什么是五种字体系列?
    • 1.草书(例如,Zapf-Chancery)
    • 2.奇幻(例如,星球大战)
    • 3. Serif(例如,Times New Roman)
    • 4. 无衬线字体(例如 Helvetica)
    • 5. Monospace(例如,Courier)
  • 流行的网络字体:
    • 1.宋体
    • 2. 时代新罗马
    • 3.黑体字
    • 4.快递
    • 5. 口径
  • 要检出的字体工具
    • 字体对
    • 字标.it
    • 什么字体
  • 如何将 Web 安全字体添加到我的网站?

什么是网络安全字体?

排版字体字符字母设计

仅当字体安装在任何浏览器或设备(手机、平板电脑等)上时,该字体才可读且看起来相同。 Web 安全字体是通常预装在任何设备(计算机、手机、游戏机、平板电脑和智能电视)中的字体。

为您推荐:每位伟大设计师都需要的 20 种令人惊叹的徽标设计字体。

为什么 Web 安全字体很重要?

徽标设计字体草图

在一个完美的世界中,您可以为您的网站选择任何您想要的字体。 但是,基于操作系统的设备带有自己的预安装字体选择。 问题在于它们的设计通常因您使用的系统而异。 在 Windows 上运行的设备可能有一组,MacOS 可能有另一组,然后谷歌的 Android 有另一个不同的版本。

当你打开一个网站时,你在视口上看到的字体可能不一定是设计师想要的字体。 含义:假设设计师使用了一种相对晦涩的字体。 如果您没有安装该字体,那么您的网站将恢复为系统定义的通用字体,您甚至可能不知道它,因为它看起来会令人不快。

Web 安全字体是所有系统中都存在的字体集合,让您作为设计者能够指定要回退的字体,以防设备没有所需的字体。 它使您能够使网站在各种设备上看起来都一样。

什么是五种字体系列?

Photoshop 字体免费!精选

在排版中,所有字体都根据其设计相似性归类为五个字体家族之一。 这些如下:

1.草书(例如,Zapf-Chancery)

网络安全字体 - 第 1 点

Cursive 系列字体模仿人类手写,字母通常以流畅的方式连接在一起。 它通常与书法和书写速度更快的人联系在一起。

2.奇幻(例如,星球大战)

网络安全字体 - 第 2 点

Fantasy 字体系列的字体通常在每个字母中都有装饰元素,但仍然代表字符。 许多虚构书籍和电影的标题都使用这个家族的字体来加强内容的细微差别。

3. Serif(例如,Times New Roman)

网络安全字体 - 第 3 点

Serif 字体家族最显着的特征是在字母或符号的大笔画末尾有一条小线。 它营造出一种优雅和正式的感觉。 它被许多网站广泛用于正文。

4. 无衬线字体(例如 Helvetica)

网络安全字体 - 第 4 点

与 Serif 家族的字体不同,Sans-serif 家族的字体没有在每个字母上附加细线。 属于这个家族的大多数字体具有相似的笔画宽度,因此使其简约而现代。

5. Monospace(例如,Courier)

网络安全字体 - 第 5 点

在 Monospace 字体系列中,每个字母和符号在水平方向上占据完全相同的空间。 从而使它们一致且易于区分,这就是为什么它们经常与打字机一起使用,最近与计算机终端一起使用。

您可能喜欢:您需要试用的 11 种很棒的 Photoshop 字体(免费!)。

流行的网络字体:

网页设计博客 wordpress 字体排版定制器

现在我们对字体有了深入的了解,下面是 5 种流行的网络安全字体,可以添加到您的网站:

1.宋体

Arial字体

在线和印刷媒体中使用最广泛的无衬线字体之一。 这是事实上的标准。 OpenType 3.0 版将其描述为:

“现代无衬线设计,Arial 比其许多前辈包含更多的人文主义特征,因此更符合 20 世纪最后几十年的情绪。 曲线的整体处理比大多数工业风格的无衬线字体更柔和、更饱满。 在对角线上切割末端笔划,这有助于使面部看起来不那么机械。 Arial 是一个用途极为广泛的字体系列,可同样成功地用于报告、演示文稿、杂志等的文本设置,以及报纸、广告和促销中的展示用途。”

它也是 Google 文档中的默认字体。

2. 时代新罗马

Times-New-Roman-字体

Times New Roman 是 Serif 字体系列中旧 Times 字体的变体。 1931 年受英国报纸“泰晤士报”委托,由 Monotype 印刷设备公司的艺术顾问斯坦利莫里森设计,并与时代广告部门刻字部门的维克多拉登合作。 它已成为有史以来最流行的字体之一,并预装在大多数设备上。

Times New Roman 名称中的 Roman 是对 roman 样式的引用,是 Times New Roman 字体系列的第一部分。 它起源于 15 世纪末和 16 世纪初的意大利印刷术,该设计与罗马或罗马人无关。

3.黑体字

Helvetica字体

Helvetica 或 Neue Haas Grotesk 是 Sans-serif 字体家族中广泛使用的字体。 由瑞士字体设计师 Max Miedinger 在 Eduard Hoffmann 的帮助下于 1957 年开发。 它采用新怪诞的设计,具有高 x 高度、水平或垂直线上的笔划终止以及字母之间非常不寻常的紧密间距,这些结合起来使其具有坚实、密集的外观。 最初设计用作中性字体,非常清晰,在形式上没有内在意义,可用于各种标牌并命名为 Neue Haas Grotesk(新哈斯怪诞),它很快获得 Linotype 许可,并于 1960 年更名为 Helvetica , 瑞士的拉丁语。 该字体以其中性的特点深受设计师的喜爱,并受到吉普、川崎、摩托罗拉、宝马等众多知名品牌的青睐。

4.快递

Courier字体

Courier 字体是属于 Serif 字体家族的一种字体。 最初由 Howard “Bud” Kettler 为 IBM 的打字机设计,它已被改编为计算机字体,几乎所有计算机都安装了它。 由于其 Monospace 排版,在 1990 年代,它在电子和计算机行业中得到了重新使用,在这些行业中,字符列必须一致对齐,例如,在编码中,它是编写或描绘任何类型代码的默认字体。

按照行业标准,所有剧本都要用 12 点信使来写。 直到 2004 年 1 月,美国国务院一直将其用作所有文件的标准字体。随着在数字行业中的使用越来越多,Courier 开发了具有更大标点符号、相似字符之间更强区别(例如数字 0 /大写 O 和数字 1 / 小写 L) 等,以提高屏幕易读性。

5. 口径

字体

Calibri 字体是 Lucas de Groot 于 2002-2004 年设计的 Sans-serif 字体家族的一员。 它于 2007 年公开发布,与 Microsoft Office 2007 和 Windows Vista 捆绑在一起。 从 Office 2007 开始,它取代了 Times New Roman 作为 MS Word 中的默认字体和 Arial 作为 MS Powerpoint、MS Excel、Microsoft Outlook 和 WordPad 的默认字体。 它是 ClearType 字体集合的一部分,旨在与 Microsoft 的 ClearType 文本呈现系统一起使用,使文本在液晶显示器 (LCD) 上更清晰易读。

要检出的字体工具

工具配置设置部件要求

有许多在线工具可用于在您的网站上使用之前测试不同的字体。 如果您想探索可用的字体类型或在选择要使用的字体时遇到困难,这些工具会很有帮助。

字体对

网络安全字体 - 第 1 点

Font Pair 是一个小众网站,拥有大量与排版相关的资源。 有各种电子书、指南、评论、视频和字体插件推荐。 他们有一个专门介绍 Google 上最流行的字体的部分,并深入比较了哪些字体最适合搭配使用。

字标.it

网络安全字体 - 第 2 点

Wordmark.it 可让您快速预览使用特定字体甚至多种字体组合后的文本效果。 只需在栏中输入文本,瞧,它会向您展示不同字体的外观。

什么字体

网络安全字体 - 第 3 点

WhatTheFont 之于文本就像反向图像搜索之于图像。 它可以帮助您识别您见过的字体。 只需上传字体图像,它就会将其与他们的数据库进行匹配,并为您提供它认为最接近的匹配项。 您还可以前往他们活跃的论坛寻求帮助,以识别字体甚至是一般的排版查询。

您可能还喜欢:将自定义字体添加到您的 WordPress 网站主题的 3 种不同方式。

如何将 Web 安全字体添加到我的网站?

问自己三个问题来评估结果

现在您已经选择了网络安全字体,是时候应用它了。 如果您的编程经验很少,请按照以下步骤将网络安全字体添加到您的网页:

1. 打开 header.php 文件。

2.复制字体源代码/标准代码。 您通常可以通过 Google 找到它。

代码-1

3. 将代码粘贴到头文件的顶部。

4.加载你的style.css,输入字体代码来改变你选择的字体文本。

代码-2

到最后,您的样式表应该如下所示:

代码3
作者-图片-Abhyank-Srinet
本文由 Abhyank Srinet 撰写。 Abhyank 拥有 ESCP Europe 的管理硕士学位和仪表与控制专业的工程学位。 他对数字领域的兴趣促使他创建了一家应用咨询在线初创公司 (MiM-Essay),专注于传播有关早期职业硕士学位的优质信息。