Google Fonts 指南,供在线使用的免费字体库

猫勺猫勺 02-23 968 阅读

字体选择可能是网站吸引力的决定性十字路口:引人注目的字体可以吸引注意力并吸引行动,而不太合适的选择可能会阻止用户留下来。品牌的目标是在可读性和原创性、可访问性和“风格”之间取得平衡,同时试图确定反映其意图传达的信息的排版集。这个问题的答案可能在于 Google Fonts,这是优化网站视觉传达的最佳在线资源之一,这要归功于可以正确强调我们内容的字体。

什么是 Google Fonts,Web 字体库

Google Fonts 是 Google 向所有用户免费提供的字体库。

这些字体旨在轻松合并到网站中,确保文本在不同平台上一致地显示,并且该项目的开源性质允许广泛的用途,包括商业用途,激发网页设计的创造力和创新。

更具体地说,Google Fonts 是 API(应用程序编程接口)的集合,允许用户在其网站或应用程序上使用 Web 字体。该项目最初被称为 Google Web Fonts,成立于 2010 年,旨在使发现和探索自由许可的字体更容易导入 Web 项目或应用程序; 交互式网络目录由 Google 托管,所有字体和带宽都是免费的。

如今,这个开源库拥有 1000 多种语言和 150 多种书写系统的数百种字体,允许您浏览字体系列并测试不同的字体,然后您可以自由下载和使用,与 CSS 和 Android 和 iOS 系统具有非常高的兼容性。

平台功能和字体信息

对于每种字体,还可以发现其他和好奇的信息,例如其设计者、相关工作以及有关字体趋势和使用的数据;此外,谷歌根据用户所在地区的受欢迎程度、消费模式和趋势对其字体进行排序。

从法律上讲,大多数字体都是在开源许可下发布的,只有少数是在 Apache 或 Ubuntu 字体许可下发布的——在所有情况下,它们也完全可用于商业用途;该库也由 Monotype 的 SkyFonts 和 Adobe 的 Edge Web 和 Typekit 服务分发。

截至 2021 年,该项目还扩展到图标,最初有一组材料图标,这些符号是为常见的通信需求而制作的,可以下载到桌面上,用于 Android、iOS 和 Web 的数字版。

这个库是做什么用的

这似乎是一个小细节,但实际上我们知道为我们的网站选择合适的字体是多么重要,符合品牌标识,并且能够在阅读单词之前与目标受众交谈,因为所选字体的每一条曲线和线条都将有助于定义网站上的整体用户体验。

Google Fonts 功能因其能够增强开发人员和最终用户的网络体验而脱颖而出,并结合了多功能性和易用性。

该系列从永恒的经典字体系列到现代设计,提供多种风格,能够满足任何品牌需求。这些字体可以通过代码片段或直接链接集成到网站中,从而消除了技术复杂性并加快了开发过程。

因为它是开源的,谷歌字体不仅允许免费使用,没有许可费,而且允许定制,允许字体根据项目的特定需求进行定制。针对网络的优化是另一个优势,因为这些字体旨在快速加载并在任何设备和浏览器上保持其视觉完整性,从而确保一致和有凝聚力的用户体验。准确地说,使用谷歌字体生成的代码,谷歌的服务器会根据他或她的浏览器支持的技术自动向每个用户发送尽可能小的文件——这使得所有用户的网络速度更快,特别是在带宽和连接性存在问题的领域。

此外,还非常注重可访问性,字体可提高文本可读性并方便所有用户(包括有视力障碍的用户)导航。此外,库的持续更新确保排版选项与设计演变保持同步。

为什么选择 Google 字体

Google Fonts 背后的概念是“简单”:众所周知,Web 字体会影响页面的加载时间,也会影响内容的可用性和可读性。一言以蔽之,它们会影响用户体验,但同时它们也向用户提供有关品牌想要传达的内容及其呈现方式的即时信息,因为它们就像内容的语气。

能够依靠包含数千种 Google 字体的库——免费、质量最高且随时可用——对于那些正在从事 Web 项目并希望照顾将承担其通信的图形方面的人来说,这绝对是一个巨大的优势。

解释谷歌网络字体成功的另一个方面是实用性:这个广泛的数据库的内容经过优化,可以在任何媒体、设备和平台上正确显示。与经典字体相比,这些字体已经为显示器和屏幕上的 Web 显示而创建,因此具有更现代和新鲜的特征——这也有利于用户的视图。

因此,从技术角度来看,谷歌确保平台生成的代码已经过优化,并允许服务器根据其浏览器支持的技术自动向每个用户发送尽可能小的文件,例如使用WOFF 2.0压缩(如果可用)。通过这种方式,网页对所有用户来说都变得更快,特别是在带宽和连接性存在问题的领域,并且“每个人都可以在他们的产品和网页中享受相同的质量和设计的完整性,无论他们身在何处”。

谷歌字体的(也是SEO)优势

想要尝试总结和概述 Google Fonts 的主要优势,我们可以说它们不仅在可读性和美观性方面提供了一些积极的功能,而且在内容性能方面也提供了一些积极的功能,甚至对 seo 也有可能的有益影响。

具体而言,Google 字体包括:

美观、有吸引力和吸引力,因此能够吸引用户的注意力。

针对网络进行了优化:Google 字体库确保字体在所有设备、平台和媒体上的字体兼容性,以实现正确和愉快的阅读。

可读性:对于每个字体系列,还有一个不同的“权重”,例如,允许您从标题中使文本内容多样化,从而表征和优化页面的可见性。

轻量级:Google Fonts API 经过压缩和优化,因此使用它们的网页通常比使用不同字符的网页具有更高的加载速度。此外,Googlebot 可以更快地扫描 Google 字体系列。

与众不同且用途广泛:在线目录丰富且不断扩展,因此每个人都可以为他们的数字项目找到合适的字体。

免费:与其他平台上可用的字体不同,此库中的字体是免费的,可免费安装在每个站点和应用程序上。

兼容:网站上的所有字体都符合 Google 社区的精确标准,并确保高水平的兼容性。

谷歌字体数字:最有趣的统计数据

Google Fonts 目录很快引起了用户的兴趣,以至于据估计,字体已被浏览了 80,269,433,262,212 次(即超过 80 万亿次),下载量超过 300 亿次——实际上,就好像地球上的每个人都至少下载了每种字体 2 或 3 次。

迄今为止,该系列包括 1591 个字体系列,这些字体系列有助于“为网站和产品赋予个性和性能”,正如该项目网站上所述,现在对于任何想要下载字体以用于制作网站或设计图形的人来说,这是一个持续的参考。

事实上,这个库被很大一部分网站管理员和网页设计师使用,他们正在为他们的专业项目寻找解决方案,并迅速确立了自己作为网络项目可读性的标准——当然,这在一定程度上要归功于谷歌作为搜索引擎的影响力。

据统计,有超过 5300 万个实时网站使用 Google Font API,其中约有一半的网站使用该 API,这些网站跻身全球访问量最大的一万个网站之列,在互联网上的字体类别中排名第一。

最常用和最受赞赏的 Google 字体是什么

找出世界上浏览和下载次数最多的五种 Google 字体也很有用,以便了解设计师所寻求的功能(无论如何都受到用户的赞赏)。

排名第一的是 Roboto 的特权,这是一种由 Christian Robertson 提供的无衬线字体,并被设置为 Android 的系统字体:显示近 170 亿次,它以 12 种不同的样式下降(其中许多也出现在这些 Google Fonts 分析中:例如,Roboto Condensed 总体排名第六)。根据官方描述,Roboto具有“双重灵魂”,因为它具有机械骨架和形状,主要是几何形状,结合了友好和开放的曲线;结果是一种允许您将字母放置在其自然宽度的样式,使阅读速度更加自然。

1.png Google Fonts 指南,供在线使用的免费字体库  SEO 搜索引擎优化 第1张

在第二位,我们找到了Open Sans,这是一种由史蒂夫·马特森(Steve Mattson)创建的高度可读的字体,谷歌本身在其一些印刷品和网站以及广告中使用了这种字体:主要功能包括具有垂直应力,开放形状和中性外观的设计,但友好。

铜牌由波兰人Łukasz Dziedzic的Lato获得,他被描述为一个角色,由于字母的半圆形细节,提供了 “一种温暖的感觉,而坚固的结构则提供了稳定性和严肃性”。

在领奖台上,我们找到了 Noto Sans JP,它是 Noto Sans(由 Google 直接创建的全球字体集合,用于所有现代和古代语言的书写)的衰落,用于日语和日本使用的其他语言,涵盖平假名、片假名和汉字,但也支持拉丁语、西里尔语、希腊语。

排在前五名的是蒙特塞拉特,这是一种由朱丽叶塔·乌拉诺夫斯基(Julieta Ulanovsky)创建的谷歌字体,由18种不同的风格组成,从最轻到最重,从名字开始就受到布宜诺斯艾利斯蒙特塞拉特社区的启发。

如何选择 Google 字体

如前所述,Google Fonts 目录包括一千多个字符系列,这种广泛的选择可能会使为您的网站搜索最佳字体变得复杂(或至少延长时间)。

最佳字体的决定不能是随机的,而必须是对想要传达的身份进行彻底反思的结果,这个过程需要平衡美学和功能因素,确保所选字体不仅美观,而且表现良好且易于访问。举个简单的例子,一个想要唤起奢华和精致的品牌可能倾向于优雅和微妙的字体,而一个旨在传达坚固性和可靠性的公司可能更喜欢更强大和更明确的字体。

可读性是需要仔细观察的灯塔:在任何设备和尺寸上都能很好地阅读的字体可确保信息响亮而清晰地传达。这方面与可访问性密切相关,这一原则确保所有用户,无论其视觉能力如何,都可以不受阻碍地浏览网站。

然后,字体的选择必须与现有设计相协调:如果网站已经具有独特的视觉元素,例如徽标或图像,则字体应起到补充作用,创造一种视觉平衡,不会分散注意力,而是引导用户浏览内容。

最后,重要的是要考虑字体对网站性能的影响。样式种类繁多的字体会减慢加载时间,对用户体验产生负面影响,甚至可能对 SEO 排名产生负面影响。Google Fonts 提供了有关每种字体影响的有用见解,使我们能够不仅在美学方面而且在技术方面做出明智的选择。

为了帮助我们更好地确定哪种字体最适合我们的需求,Google Fonts 官方网站允许我们设置多个过滤器来执行有针对性的搜索。具体来说,我们可以对以下字段采取行动:

搜索:我们可以写出我们已经知道的特定字体的名称。

预览文本:提供字体视觉效果的预览,选择基本文本或插入我们选择的句子。

字体大小:设置预览中显示的文本的像素大小。

类别:根据所有 Google 字体所属的 5 个类别筛选字体类型

语言:根据语言的字母表(例如拉丁语、中文、西里尔语、阿拉伯语)缩小搜索范围。

字体属性:选择一些字体属性,如粗细、样式数、宽度和倾斜度。

Google 字体有哪些类别

值得研究的是 Google 字体的 5 个类别,它们定义了这些字符系列在 Web 上的样式。

1.png Google Fonts 指南,供在线使用的免费字体库  SEO 搜索引擎优化 第2张

衬线:与经典排版一样,此类别包括所有呈现优雅的字体(也称为棍子或衬线),即每个字母末尾的特殊正交拉伸。

无衬线字体:是没有衬线字体的字体系列,因此缺少终端特征。

显示:是通常为大标题设计的字符,这些标题通常在一个字母和另一个字母之间几乎没有空间,以获得更有影响力的效果。

手写体:模仿手写的字体。

等宽:具有相同宽度的字符族,并以某种方式提醒打字机的样式。

如何向网站添加 Google 字体

将 Google 字体添加到您的网站是一个相当简单的过程,只需几个步骤。

如果我们在 WordPress 环境或其他 CMS 上工作,我们首先需要检查我们的主题是否默认不包含 Google 字体(这是最新高级主题的常见情况),检查配置面板中的功能。如果此选项不存在,我们可以下载一个插件(例如,Easy Google Fonts 或 Google Fonts Tipography),将其安装在面板上并继续选择首选字体。

要手动安装,只需访问 Google Fonts 网站并浏览可用的大量字体,找到反映网站风格和基调的字体。在这一点上,我们可以更深入地研究可用变体和相对字体重度的概述。选择最适合设计的选项后,Google 会自动生成一个代码片段以插入网站,该代码片段本质上包括一个链接,该链接要放置在 HTML 页面的头部部分,将网站精确地链接到 Google 字体库。

下一步是将字体应用于 CSS 样式,在 font-family 属性中为我们希望设置样式的 HTML 元素指定字体名称 - 例如,如果我们希望将字体应用于所有正文文本,我们需要将字体添加到正文标签的 CSS 规则中。

在不同的浏览器和设备上测试新字体以确保其正确显示并且不会对页面加载时间产生不利影响非常重要:即使 Google Fonts 针对高性能进行了优化,检查集成是否顺利始终是一个好主意。

在 PC 上手动安装 Google Fonts 是手动完成的:只需访问 Google Fonts 网站,选择字体并单击“下载”即可下载拉链格式的 Google 字体(单个字体或整个系列)。要在 PC 上安装字体,只需解压缩文件夹,右键单击 ttf 文件并选择安装。现在,我们可以使用博客或网站中的相同字体来创建符合 Web 样式的电子书或图形。

另一方面,有两种主要方法可以将 Google 字体添加到我们的项目中,尤其是 WordPress 网站:我们可以安装一个专用插件,我们可以将工作委派给该插件,或者我们可以继续手动安装。

选择 Google 网页字体的最佳做法

因此,我们了解了 Google 字体是什么以及如何选择它们并将它们安装在我们的网站或博客上,然后我们可以启动与在我们的在线项目中使用这些字符的提示相关的最新反思。

字体在视觉上定义我们想要为我们的网站和页面提供的样式方面起着重要作用,这些风格不能与我们想到的目标受众脱节。网页设计研究根据归属领域强调了与字体、颜色和形状相关的“规则”——例如,在使用绿色代表自然、健康和福祉方面,这些规则被具体化了——并且有一些“最佳实践”一般也适用于谷歌字体的选择。

字体必须主要易于阅读,因为文本的根本目的是阅读。

作为推论,最好记住,尺寸太小的字体可能会让人阅读很累:与其牺牲阅读的便利性,不如放大字体的大小(至少指向 16 – 17 像素左右)。

如果我们找到一种我们在美学上喜欢的字体,但很难阅读,我们仍然只能将其用于某些图形元素,而不能用于内容的正文。

在为网站设置字体之前,最好运行跨浏览器兼容性测试,以确保它在所有浏览器上正确显示,或者至少在最流行的浏览器(Google Chrome、Safari、Mozilla Firefox、Edge)上正确显示,并防止其外观略有不同。

不要超过同一站点上的字体数量,并限制自己最多使用两种或三种不同的样式,这也是因为每种字体(每个单一变体,而不仅仅是每个系列)都会导致网站速度略有减慢。实际上,每种字体的页面粗细最多可以增加 400 kb。

实现令人愉悦的视觉效果的经典组合包括对标题和标题使用衬线字体,对文本使用无衬线字体。 但是,通过正确使用字体大小、粗细和颜色,即使只有一种字体,我们也可以达到有效的效果。


The End 微信扫一扫

文章声明:以上内容(如有图片或视频在内)除非注明,否则均为腾龙猫勺儿原创文章,转载或复制请以超链接形式并注明出处。

本文作者:猫勺本文链接:https://www.jo6.cn/post/28.html

上一篇 下一篇

相关阅读

取消
微信二维码
微信二维码
支付宝二维码