1. 项目缘起当字体设计遇上文化纪念先交代一下背景。2017年彩虹旗的设计者吉尔伯特·贝克Gilbert Baker去世了。对于很多人来说这个名字可能有点陌生但你一定见过他留下的那面旗帜——六色条纹从红到紫从上到下排列三十多年来一直是全球LGBTQ社群的共同视觉语言。我第一次看到这面旗帜是在大学时期当时的感受是“色彩真好看”直到后来深入了解才知道这面旗的背后有这么多故事。我是一名独立设计师日常工作以品牌视觉和字体设计为主。做字体的时间不算短但真正从零设计一款完整字体还是头一回。为什么要做彩虹字体说白了是想用自己的专业手艺为一位改变了世界视觉语言的人做点纪念。贝克用旗帜打开了一种公共表达的可能性我想用字体延续这种表达——让文字本身带上彩虹的力量。这个项目的定位从一开始就非常明确英文字体六色渐变适合标题和展示场景。不是要做一款面面俱到的大字符集字体而是聚焦在“视觉冲击力”和“纪念意义”上。从构思到最终发布前后花了大约两个月中间经历了无数次推翻重来也在字体工程上踩了不少坑。这篇文章想把整个项目的来龙去脉、设计决策、技术实现和踩坑经历完整记录下来。如果你也在考虑做一款带有特殊意义的字体或视觉项目这篇文章应该能给你一个完整的参考路径——从文化符号的解读到字体形态的推敲再到具体的工程落地。2. 设计拆解如何把一面旗帜变成一套字体2.1 彩虹旗的符号解析为什么是六色六色如何排列在设计字体之前第一步必须理解旗帜本身。吉尔伯特·贝克在1978年设计彩虹旗时最初用了八种颜色每种颜色都有特定的象征意义。后来的版本因为布料染色工艺的限制简化成了六色红色代表生命橙色代表治愈黄色代表阳光绿色代表自然蓝色代表和谐紫色代表精神。这六个颜色不是随手挑的它们共同构成了一种关于“完整多样、互相包容”的视觉叙事。这个六色体系就是字体色彩方案的原材料。我一开始也纠结过要不要还原最初的八色版本毕竟那才是贝克的原始设计。但仔细想了想六色版本陪伴了社群三十多年它既是历史的选择也是当代人最熟悉的样式。用六色就是和这三十多年的共同记忆对话。色彩排列也有讲究。原版的红色永远在最上方紫色在最下方。这个顺序不能乱因为它在视觉上代表一种方向感——从“生命”出发向上延伸至“精神”。字体设计里如果采用水平渐变红色应该出现在笔画的上部或左侧如果采用垂直渐变红色必然在顶部。这些细节都会影响最终的情感传达。2.2 字体形态定位为什么选择无衬线大写字母确定了色彩基础之后下一个问题就是这六个颜色放在什么样的字形上最好看我做了好几个方向的实验。窄长的衬线体优雅但太古典和鲜艳的六色渐变搭配起来显得别扭手写体自由奔放但识别度不稳定——尤其是大字标题场景下手写体的飘忽感会让渐变的节奏难以控制。最终我选了最稳妥也最直接的方案几何风格的无衬线大写字母。为什么因为彩虹旗本身就是几何化的——六条等宽的色带干干净净没有任何多余的装饰。无衬线大写字母恰好具有这种简洁、直接、富有力量感的特质和旗帜本身的视觉语言天然契合。另一个原因是大写字母的形态规整笔画粗细均匀渐变色彩能铺得开色彩之间的过渡也能保持均匀的节奏。具体到字形的比例我参考了几何无衬线的经典范式——圆形、三角形和矩形的基础关系。比如字母O要接近正圆字母A的顶点保持尖锐字母E的横画比例要均衡。这套体系保证了一套字体的内部统一性不会出现“每个字母看起来都不错但放在一起很杂乱”的问题。2.3 技术路线选择本机绘制还是在线工具字形和色彩方案确定之后面临一个现实问题用什么工具来实现。市面上主流的选择有FontLab、Glyphs和FontForge。FontLab是老牌工具功能全但界面偏专业上手有一定门槛Glyphs在近年来的独立字体设计圈子里更流行界面清爽对曲线编辑的支持非常顺滑FontForge免费开源适合预算紧张的场景但交互体验相对老旧。我最终选了Glyphs原因是它处理大规模字形调整和组件复用非常高效——比如做一套大写字母时很多字母可以共享组件编辑一个基础部件就能同步更新多个字形。另外还要提一个备用方案如果你不想装这么重的软件也有一些在线的字体编辑工具比如FontArk、Birdfont有桌面版甚至可以直接用SVG转字体的工具。但我的经验是做正式项目还是老老实实用专业工具。在线工具可以用于快速验证想法但拖到复杂字形、精细曲线、严格间距调整这些环节时桌面工具的优势非常明显。3. 实操全记录从字母表到TrueType文件3.1 六色渐变方案两套模式各有用武之地先把最核心的色彩方案讲透。我做了一个关键决策提供两种渐变模式分别对应不同的应用场景。第一种是“水平渐变模式”——每个字母从左到右依次经过红、橙、黄、绿、蓝、紫六种颜色字母内部形成完整的彩虹色带。这种模式适合单行排布、文字较长的场景比如海报标题、横幅文字视觉感受比较整体。第二种是“垂直渐变模式”——每个字母从上到下依次经过六色相当于把旗帜的条纹方向直接映射到字母的笔画方向。这种模式的识别度更高因为单字母就能完整呈现六色的层次适合LOGO、短单词、首字母大写的场景。实现方式上我并不是在每个字母内部手动绘制六种颜色而是利用字体编辑软件里的“颜色层”或“SVG轮廓”功能。具体来说我把六种颜色分别做成六个子图层再按渐变的方向对每个子图层的轮廓进行偏移和裁切。这个过程的本质是把一个完整的字母轮廓按比例切成六个区域每个区域填充对应的颜色区域之间在视觉上自然过渡。实际参数上六个色段的分布并不是完全等分的。如果三等分或六等分均分视觉上会出现颜色比例失衡的问题——黄色和绿色在明度上偏高占比过大会让整个字看起来发飘。我反复调整后把各色段的宽度比设置为红12%、橙12%、黄20%、绿20%、蓝18%、紫18%。这样既保留了完整的彩虹光谱又让视觉重量均匀黄色和绿色不会显得过于强势。3.2 字形绘制的关键环节闭合路径、锚点控制与组件复用字形绘制是整个项目里工作量最大的环节。我先从26个大写字母的基础轮廓开始。在Glyphs里新建一个字体文件设置好字面宽度UPM每单位含1000个设计单位然后逐个绘制A到Z。每个字母的核心要求有两点一是外轮廓干净二是路径闭合。听起来容易做过就知道一个看似简单的字母B单是曲线的锚点位置和曲率控制就能调一个下午。具体到锚点控制的经验能少用锚点就少用能用直线的地方不用曲线能用曲线的地方不追求多锚点。举个我常遇到的例子字母S是最难画好的一个它的两条曲线要求对称协调但很多初学者会堆四五个锚点去强行拉曲线结果反而出现波浪状的抖动。正确的做法是左右两端各放一个端点锚点中间通过贝塞尔手柄来控制曲率整个S曲线的锚点控制在四个以内。组件复用这块也要善用。大写字母里有不少可以共享结构的部分比如B、P、R共享半个竖杠和封闭圈E、F共享横画O、Q是同一个圆形基础。在Glyphs里把这些公共部分做成组件修改一次就能全局同步后期微调时省了大量时间。3.3 间距与字距的调整逻辑让视觉均匀而非数学均匀很多人忽略了间距和字距但恰恰是这一步决定了字体“是否专业”。这里有个常见的误区以为等宽间距就是好的间距。其实是错的。字形宽度一样、间隔距离一样不代表视觉密度一样。比如“W”这样的大宽度字母和“I”这样的窄字母如果间隔绝对值相同整行文字看起来会忽疏忽密。我在Glyphs里对每个字母的左右侧隙LSB和RSB做了单独调整。调整的原则是“视觉面积均等”——用一个三角形、一个圆形、一个正方形来做测试字符反复对比每个字母在不同组合下产生的留白面积粗糙地说就是让每个字母周围的白空间大致均匀。最终所有字母的侧隙值集中在80到160单位之间没有用绝对的等宽设置。测试时我用“AVATAR”“PRIDE”“SUMMER”等几组单词做了整体字距校准确保标题排出来没有突兀的稀疏或拥挤。3.4 字体工程导出从设计稿到可安装文件字形、色彩、间距都完成了接下来就要把字体导成标准格式发布。在Glyphs里我选择导出OpenType TrueType格式。这里要注意一个设置必须勾选“在字形中保留SVG颜色表”否则导出的字体只会显示单一黑色。颜色字体目前的实现方式主要有几种苹果的Apple Color Emoji采用的SBIX位图方案标准化的COLR/CPAL矢量图层方案以及OpenType SVG方案。我做的是OpenType SVG字体兼容性上在主流操作系统和设计软件中表现比较均衡。导出之后文件名为“Gilbert Rainbow.otf”。我分别打包了水平渐变和垂直渐变两个字体文件方便用户按场景选择。文件大小约120KB这个体积在颜色字体里算是比较小巧的因为矢量路径占用空间远小于位图。关于安装验证我同时测试了macOS和Windows两个系统。macOS双击字体文件选择安装即可Windows右键选择安装或者通过设置进入字体管理页拖入安装。安装完成后在Photoshop、Illustrator、Word里都能正常调取大字号下渐变色带清晰没有出现色块错位或透明度丢失的问题。4. 发布前的问题清单与优化实录4.1 常见渲染问题为什么颜色在某台电脑上消失了这个项目里遇到的最典型问题是颜色在部分环境下显示不出来。有朋友拿到测试版后反馈在Windows上装好字体打开Word输入文字结果显示是黑色的完全没有渐变。排查后发现原因是旧版本的Office对OpenType SVG颜色字体的支持不完善默认回退到了纯色渲染。这不算字体本身的bug而是软件兼容范围的问题。解决方案是在发布说明里明确标注支持环境macOS的TextEdit、PagesAdobe的Photoshop/Illustrator/InDesign以及较新版本的Chrome和Edge浏览器都能正常显示颜色。对旧版Office用户我额外准备了一个灰度版本字体骨架完全一样只是没有色彩图层保证文字内容不丢失。这里也给读者提个醒颜色字体发布时兼容性说明一定要写得清楚否则会被当bug反馈淹死。4.2 笔画串色的避坑经验六个图层怎么切割干净另一个让我折腾很久的问题是笔画串色。在垂直渐变模式下字母A的左右两支笔画在某几个字号下会出现颜色互相污染的情况——比如左边笔画已经渐变到蓝色了右边笔画还在黄色区域两支笔画交汇处挤出突兀的绿色边缘。检查后发现原因是我在切割六个色区时交叉的部分出现了重叠轮廓导致最终渲染时叠加了相邻图层的颜色。解决办法是在轮廓切割后对所有色区边界做一次“焊接”操作——把相邻色区的重叠路径合并确保每个像素只属于一个色区。这个操作需要耐心26个大写字母、每个字母六层总共156个图层逐个检查。一个不够仔细就容易漏我当时反复检查了三遍才全部清理干净。4.3 打印与深色背景场景下的可读性调整颜色字体到了打印环节又会出现新的问题。我最初设计的色彩明度偏高在深色背景上使用确实都有不错的视觉效果但白纸打印出来后黄色、绿色区域因为明度太高线条显得非常细甚至接近消失。这是因为打印设备对高明度色的墨量限制——黄色油墨的实际覆盖率有限。针对这个情况我在最终的字体文件里增加了一套“深色模式”变体。简单说就是把整体颜色的明度往下压了15%到20%让饱和度更沉稳同时保证六色的区分度依然清晰。用户在做白底印刷品时优先选择深色模式而屏幕展示依然用常规版本。4.4 兼容性和打包多格式整合的发布方案为了让更多人能够直接使用我在发布压缩包里整理了几种文件格式这里列出来供参考文件格式适用场景注意事项OTF (OpenType SVG)设计软件、新版本办公套件支持色彩图层兼容性最广TTF灰度版旧版本办公软件无颜色信息不产生兼容问题WOFF2网页嵌入需配合CSS的font-face声明使用字体使用指南PDF非专业用户说明安装方法和支持环境网页嵌入这块我特别说明一下。WOFF2文件配合font-face在页面上能正常渲染彩色字体。但要注意浏览器对OpenType SVG的支持情况也在变化如果你要在页面上开放字体预览最好加一个canvas备选方案否则小众浏览器可能直接显示系统默认字体。5. 字体背后的叙事为什么颜色本身就是一种宣言5.1 彩虹旗的设计哲学一种公共空间的视觉占领做了这个字体项目之后我去查阅了不少关于彩虹旗的史料。贝克在设计这面旗的时候目标很明确——要替代当时社群使用的粉色三角形标识。粉色三角形是纳粹集中营里标记同性恋者的符号虽然它承载了沉重的历史记忆但始终带有压迫的色彩。贝克想要一个全新的、正面的、能够走向公共空间的符号。这给我的启发是设计不只是美学问题更是一种公共表达的手段。彩虹旗之所以能传播得那么广恰恰是因为它以最简单、最醒目、最有感染力的方式——颜色完成了意义的传递。颜色可以直接刺激人的感官而字义需要理解成本所以在跨文化的传播中颜色具有天然的优势。做彩虹字体的时候我始终记着这个逻辑。字体的意义不在于它写了什么内容而在于文字本身呈现出来的色彩和形式就已经完成了某种表态。哪怕是一句“天气不错”用这个字体排出来也能传达一种立场和温度。5.2 字体与旗帜的呼应从静态旗帜到动态文字旗帜是静止的字体是可以用在各种媒介上的。这是我做这个项目时最兴奋的一层——把原本固定在一面布上的颜色叙事移植到可复制的文字编码里。当你用这个字体打出一行字那行字的每个字母都携带着完整的六色信息。无论是做一个公众号头图还是个人主页的大标题都相当于把彩虹旗的叙事散播到了更细微的日常场景中。它不再是一面挂在墙上的旗而是融进了电子邮件、海报、PPT和博客标题这些流动的数字媒介里。这种感觉很微妙。当文字本身成为色彩的载体时视觉记忆的触发会变得更强。哪怕某个人不了解彩虹旗背后的具体历史只要他多次看到这种六色渐变的文字就会在潜意识里建立起颜色组合和某种情感连接。5.3 设计师的社会表达专业能力与公共议题的边界这让我想到设计师这个职业身份的社会属性。设计师可以只做商业需求那没问题但当我用自己的专业技能去触碰公共议题时专业就变成了表达的工具。字体设计不太适合讲复杂的故事但它非常擅长表达态度和情感。它能用最直观的方式让人感受到“这是一个不同的东西”。在项目页面的介绍里我放了一段吉尔伯特·贝克的话的意译“旗帜不过是一块布但它是那段历史的碎片。”我的字体也是一样它不过是一组数字字符但希望它能成为那段历史的一种延续。做项目的过程里我也反复问自己有没有消费这个主题的嫌疑后来想清楚了只要这个字体的设计是真诚的、技术上过硬的、愿意共享出来的就值得做。设计语言的纪念价值在于创造依旧被使用的东西而不是把纪念做成一件束之高阁的展品。6. 资源获取与二次创作指南6.1 非商业用途与商业授权说明目前这款字体已经对外开放下载。用途界定上我做了一个比较灵活的授权方案。非商业用途比如个人博客、学校社团海报、公益组织的活动物料完全免费不需要额外的授权申请。商业用途比如企业VI系统、广告主视觉、付费产品包装需要单独联系授权。商业授权的费用我是按项目规模跑的个人小品牌和大型上市公司肯定不是同一个标准。这里提醒一句虽然字体免费但不要忘记设计劳动的边界。如果你在某个商业项目里大规模使用这款字体作为核心视觉比如整个VI都是用这个字体做的那还是建议和设计师沟通一下授权问题这是对设计劳动的尊重。6.2 用代码灵活调用CSS与设计软件中的使用技巧在网页项目里使用这款字体核心就三行CSSfont-face { font-family: RainbowPride; src: url(rainbow-pride.woff2) format(woff2); font-weight: normal; font-display: swap; } .rainbow-text { font-family: RainbowPride, sans-serif; font-size: 3rem; letter-spacing: 0.05em; }在设计软件里记得在字体选单中确认“颜色字体”没有被系统默认关闭。Illustrator和Photoshop的某些旧版本需要在首选项里开启“显示颜色字体选项”否则即使安装了字体也只能看到灰度轮廓。需要特别提醒的是颜色字体不适合做小字号正文。因为色彩分割会让笔画在缩小时变得模糊。我给的推荐字号下限是24px网页端使用建议都不低于这个尺寸越大越能体现六色渐变的细节和张力。6.3 给设计师的再创作思路不要止步于“套用”最后想聊聊“再创作”。这款字体虽然已经发布但它更多像是一个起点而不是终点。我在使用指南里给大家留了几个开放的创作方向其一尝试把六色渐变改为自定义配色。技术原理我已经在文章前半部分讲过六个色区的切割是独立的你可以很容易地修改每个色区的色值比如改成品牌的专属色或某个特定活动的主题色。其二叠加纹理效果。在Photoshop里把字体图层做一次“图案叠加”选择细密的噪点或丝网印刷纹理能让渐变色彩变得更有质感和故事性。其三跨形态运用。把字母转成轮廓之后用3D工具挤出立体效果或者用裁切工具做局部放大原来的“彩虹渐变”会获得全新的空间结构。设计语言的生命力就来自持续不断地被重新使用、重新诠释。我也是在经历了这个完整的字体项目之后才更加确信这件事。如果你做出了值得分享的再创作欢迎随时发给我看看。写在最后做这款彩虹字体的两个月里我对“纪念”这个词的理解变得更具体了。纪念不是把一个人的照片挂在墙上而是把他的理念变成仍然有生命力的东西让它继续在更多人的日常生活中传递。对我来说这行彩虹色的字母就是我能做到的一种纪念。坦白说这是我是第一次完整地经历一款字体从构想到发布的全流程。踩了很多坑也学到了不少教训。前面提到的画路径、调间距、切色层的操作如果重来一遍应该还能快不少。但我不后悔用这种笨办法——正因为每一步都自己走过才真正理解了字体设计的工程感在哪里也才真切感受到吉尔伯特·贝克当年手工染制第一面彩虹旗时的那种坚持。最后再分享一个小技巧如果你也在做颜色字体记得一定要做多字号渲染测试——从最小的24px到最大的240px逐级检查。很多色彩问题只有缩放到特定字号时才会暴露出来提前做测试能省掉不少发布后的售后沟通成本。这款字体免费开放给所有人希望它能带着吉尔伯特·贝克留给这个世界的色彩继续在每一块屏幕上发光。