1. 犀牛前端部落首页
  2. 资讯杂谈

免费高质量字体网站

排版设计是网站中不可忽视的关键因素。那么,到2020年,您在哪里可以找到符合高质量标准的免费字体?

我坚信,为了在极简主义和视觉吸引力之间取得最佳平衡,用户界面应仅显示绝对必要的内容,同时使这些必要的元素看起来更具视觉吸引力。

保持简单,但使简单的外观令人惊奇。

但是,简单到底是什么样子?

好吧,除去所有最重要的营销手段,多余的功能和混乱的视觉效果,剩下的大部分就是用户界面副本和文本内容。听起来很无聊,说实话:这是任何应用程序或网站中最重要的方面。信息及其导航能力是用户使用我们的应用程序或网站的全部原因。

因此,通过使用正确的字体和正确的字体样式(请参阅这篇文章),我们可以创建既简单又美观的设计。这强调了设计中最重要的方面,同时使用了更少的资源,并减少了最少的不必要的认知负担。

但是最好的免费字体网站是什么?

除了字体

Dribbble,Behance,Gumroad等都是大量隐藏资源的所在地,但这涉及到筛选大量数字资源,其中一些是不完整的副业和“精简”版本。 话虽如此,如果您碰巧碰到任何好用资源,请确保将其添加为书签。

Google Fonts

在“最佳免费字体”列表中,排名第一的必须是Google字体(大Google真的强~),它超出了大多数免费字体网站提供的内容。 首先,Google字体提供了一种快速便捷的CDN(内容交付网络),使将Web字体嵌入网站中变得非常容易,而无需实际托管它们,:国内的我们要是想使用,最好将字体下载下来,放服务器。

Google字体可以按脚本和粗细来划分子集,我们还可以通过从嵌入代码的查询字符串中设置font-display CSS属性来控制它们在网络上的加载方式,从而缩短了网站的加载时间。

免费高质量字体网站

Creative Market

你可能在想:“这玩意儿,他么不免费呀!”

嗯,但是“免费商品”部分呢? 免费商品的有趣之处在于,它们实际上是暂时免费的高级字体。 尽管该部分的内容并不多,并且不能保证包含特定的字体,但每个部分每周都会更新六种新的设计资源。

要是小伙伴能经常去Creative Market上查看Free Goods(免费商品)部分,肯定可以建立了一个大型的高质量免费字体库,这些字体实际上并不需要花钱。

免费高质量字体网站

Font Squirrel

Font Squirrel就像Unsplash,但对于字体来说,虽然考虑了它已经存在了很长时间(很长的时间!),但也许可以说Unsplash就像Font Squirrel,但是对于库存图像来说更准确! 它是老牌免费字体网站之一,除了Dafont,1001 Free Fonts和Urban Fonts,尽管“松鼠”更好。

尽管许多资深的免费字体网站看起来有些过时,但Font Squirrel的网站与其他网站相比仍保持了一些现代化。 它还有两个非常有用的工具:

免费高质量字体网站

FontSpace

FontSpace是一个看起来不错的免费字体网站,尽管它只提供个人使用的免费字体,而Font Squirrel确认他们所有的字体也都是商业使用的免费字体。FontSpace可能并不总是合适的。

免费高质量字体网站

Befonts

Befonts的与众不同之处在于其专注于显示字体。

虽然有些字体只提供lite/demo版本,而且通常只提供TTF/OTF格式(这意味着它们不太适合Web),但Befonts是少数几个不采用“我们什么都有”方法的网站之一(有时会让人不知所措)。此外,你还可以将TTF和OTF字体转换成网络字体。

免费高质量字体网站

Font Shop

字体商店并不完全专注于像 Font Squirrel 和FontSpace这样的免费字体,但它仍然是一个相当不错的选择,要是前面选项没有你想要的。

我发现它是所有选项中对用户最不友好的,但字体质量相对较高。

免费高质量字体网站

其他

下面的免费字体网站看起来有点过时了,事实上有些字体也过时了,但它们可以说是当今最大的免费字体数据库

选择字体格式

OpenType (OTF)和TrueType (TTF)字体格式在很长一段时间内都是标准格式,现在仍然在平面设计中大量使用。

但话虽如此,WOFF格式在Web上的压缩效果更好(尤其是WOFF2,据caniuse.com的数据,目前94.49%的Web浏览器都支持WOFF2格式)。

事实上,新的谷歌字体嵌入代码现在只提供WOFF2格式。

不知道WOFF和TTF可以参考俺的这篇文章:oft,ttf, eot, woff, svg有什么区别

选择字体风格

现在,这些都不重要了因为这些规范已经被抛到一边了。例如,衬线字体现在可以有一种现代的感觉(想想媒体)。

相反,我们应该更关注清晰度:

  • 易读性(区分字符有多容易)
  • 可读性(整体阅读句子的容易程度)

这其中有些取决于字体本身,因此在决定使用哪种字体时应该仔细观察,但其他时候取决于字体的样式(在大小、重量等方面)。

如果有疑问,WCAG 2.0/2.1 (Web内容可访问性指南)提供了关于排版及其许多属性(如行间距、行宽、行高、字体大小等)需要了解的所有信息。

结论

字体是超级有用的,它们往往是所有需要达到适当数量的视觉和情感吸引力,而不奠定越来越多的视觉混乱。无论如何,您的设计都需要文本,那么为什么不做好它呢?

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3054.html

发表评论

登录后才能评论