咨询电话:186 7916 6165 咨询电话:186 7916 6165 (微信同号)    在线QQ:181796286
DESIGN SHARING ·
设计分享
关注开优网络 关注前沿
为什么你的内容文本需要更大字号的4个原因
网站设计新趋势

Color Fonts:学习指南

发表日期:2017-11-25    文章编辑:南昌开优网络    浏览次数:2259    标签:网站建设

刚接触这个概念你可能会问,什么才算是一个含有彩色元素的字体呢?这是一个不断被提及和应用并开始获得不小的影响力的术语,尽管在大型的网站建设项目或其他类型的设计项目中,它的使用还处于起步阶段。

像Adobe公司推出的Typekit这样的字体供应商已经开始发布一些支持浏览器引用的Color fonts选项,所以,基于这种形势,这个流行趋势日后会被更广泛的使用,有些设计师甚至称Color fonts是“网页设计的下一件大事”。

今天,在这里,我们将看看这个趋势,让你最终想清楚并决定这个概念究竟将会有多大的“用武之地”。



1.什么是Color fonts?


Color fonts,其最基础的概念就同他的名称一样——包含多种颜色,阴影或渐变,纹理或透明度的字体。这些时髦的设计选项不仅仅是添加了文字的颜色,它们是包含所有细节的特定字体。

Color fonts可以是字体文件中的矢量形状,位图图像或两者都具备,这可以使这些字体比标准的字体包更大。Color fonts的常见示例包括表情符号或图标的字母。这种风格的单色字体通常被称为chromatic fonts,因为它们只包含一个色调或灰度。

Color fonts目前的最大问题是它还没有真正的标准格式。并且所有这些文件格式都可以很容易捕获——矢量和SVG图像可以轻松扩展,但位图版本可能在大小上会受到一些限制。

实际上有五种格式要处理:

· SBIX(Apple):在Mac和iOS系统上具有原生支持的位图版本;

· CBDT(Google):Android系统上的本地支持的位图版本;

· COLOR(Microsoft):在Windows 8.1+系统上具有本机支持的矢量版本;

· SVG(W3C):矢量和位图版本;

· OpenType SVG(Adobe / Mozilla):将SVG形状放在OpenType字体中的向量和位图版本。

另一方面,主要的这些“玩家们”正在开始为接下来的走向制订相关的使用指南。Mozilla(Web浏览器Firefox的骨干)和Adobe已经达成共识,它们以OpenType SVG是作为这种趋势的首选格式。当他们作出决定时,其他人仍然在缓和。

如果你想要了解这些字体的工作原理以及所有文件格式的规格,Fontself可以为你提供一个很好的基础知识。



2.你将如何使用Color Fonts?



当你第一次看到颜色字体时,会发生两种想法:

· 哇,太恶心了!

· 酷!我很清楚我应该如何使用!

无论你在哪个阵营里,都有非常适合彩色字体的应用程序。但是你需要在理性之中使用它们(Color fonts是所有字体样式中需要被尽可能最少使用的一种样式)。

你可以试着这样使用它:

· 将它作为可以短暂引起用户注意力的设计技巧;

· 作为图标或logo中的样式元素;

· 作为接下来是一长串文本的标题;

· 对于网页设计中的其他以最简风格的设计,可以将它用作大胆的标题而起到突出作用;

· 可以使用它将重点集中在大范围文字中的某个特定单词或字母中;

· 当设计中的其余部分很简单;

· 当排版将成为你的主要艺术元素时;

· 当项目需要一些有趣和不寻常的东西来吸引用户的注意的时候。



3.在什么情况下不要使用Color Fonts?



比起你可能已经计数的案例,这里有更多不要使用Color Fonts的情况。你不会想将网站设计恢复到20世纪90年代的一些闪烁和具有视觉压倒性的疯狂色彩样式。

当你在一下情况出现时,不要使用color font:

· 你的设计需要使用图像或文字将置于图像之上;

· 你所使用的背景已经很复杂了;

· 设计中将使用大量的文本内容;

· 设计中已经包含了许多其他的设计技术,如动画或动态效果,颜色通常足以产生视觉冲击;

· 与其他新奇或特殊字体一起使用。



4.不断发展的趋势



Color Fonts趋势开始从一些主要的“设计玩家”的排版中获益并引起关注。Adobe和Mozilla采用的OpenType SVG格式可能是帮助这一趋势真正迅速发展的诱因。Adobe甚至最近向Photoshop添加了颜色字体(你可能已经注意到PS的字体选项中有一些emoji突变元素了)。

对于OpenType SVG,Adobe的官方说明如下:

OpenType-SVG是一种字体格式,其中所有的OpenType字体或只是其一些字形表示为SVG(可缩放矢量图形)的图形。这允许在单个字形中显示多种颜色和渐变。由于这些功能,我们还将OpenType-SVG字体称为“Color Fonts”。

OpenType-SVG字体允许以这些图形质量显示文本,同时仍允许文本被编辑,索引或搜索。它们还可以包含允许字形替换或替代字形样式的OpenType功能。

像Trajan Color Concept和EmojiOne Color这样的Color Fonts会像程序字体菜单中的典型字体一样出现,但是由于许多程序尚未完全支持颜色组件,因此可能无法显示其全部潜力。如果你的软件程序不支持字体中的SVG图稿,则字形将恢复为纯黑色样式。颜色仍然可以应用于这种后备样式,因为它将像典型的OpenType字体一样工作。

此外,Web Type的有一个专门用于更新彩色字体的浏览器支持的部分。

在Color Fonts的演变和使用方面,两件事将发挥主要作用:

· 使用性和兼容性,这与所有的网页设计项目和浏览器的最终目的是一样的(由于兼容性问题,现在很多的Color Fonts设计实际上更多的出现在打印项目中)

· 整体风格以及更华丽多彩的设计技术是否趋于整体。



5.在你的实际设计项目中尝试Color Fonts



如果这种字体类型正是你缩需要的一种元素的话,你可以下载Color Fonts以便开始使用或创建自己的颜色,具体取决于你的设计项目类型。

>创建你自己的

你创建的Color Font类型取决于你的软件技能。Color Font可能包含从你最喜爱的照片到美丽的气泡和渐变颜色的笔画的图像。你可以完全自己完成或使用工具来帮助设计自定义的Color Font。

· Fontself是Adobe Illustrator和Photoshop插件,可帮助你创建自定义的Color Fonts;

· 你可以从Glyphs的教程中从头开始绘制和设计所有内容;

· FontLab有一个视频教程,你可以通过一步一步的学习来掌握。



总结

你准备好在你的网站设计中使用Color Fonts的趋势吗?

就个人而言,我发现这个趋势是很有趣的,并且在诸如活动海报或传单之类的打印项目中具有真正的实际用途。但是,当谈到网站设计项目时,我仍然不太相信这可以使用的很好。时间会说明这个趋势是否真的成为“网页设计的下一件大事”,或者是另一回事。