![f0eec0e4d3caa87d896a8de8a8e5739e.png](https://i-blog.csdnimg.cn/blog_migrate/64d298a735cd44d5574d6b3423abdf28.jpeg)
无论是专业设计师还是职场 PowerPoint 法师,工作中避免不了和各式各样的字体打交道。如果还没有被「衬线、非衬线、ttf、otf」这些概念弄糊涂,不妨去了解一些可以用来制作图标、图表甚至旗帜的神奇字体。来,让我们一起默念咒语:
The quick brown fox jumps over the lazy dog.
欢迎大家来 whose.design,发现更多设计工具。
工具清单
- 资源:FF Chartwell、Flagsmith、Color Dot Font、Font Awesome、Bungee
- 神器:Prototypo、Fontello
![5a6eb00fdceed5e0bc31d8eb8ea7eb31.png](https://i-blog.csdnimg.cn/blog_migrate/af57ca51581e5eced4fc49e2b3529314.png)
FF Chartwell - 可以制作图表的字体
听到「用字体制作可视化图表」,你一定难以置信。但 FF Chartwell 是一款黑科技字体,它借助 OpenType 的特性,让用户可以通过输入字符自动生成可视化图表。
Scribble Tone
⏬https://pan.baidu.com/s/1g2lSWjGMo3BqYp4oEAiZNA
![1b03e5cd54fb0dc4008d1397d65ffdca.gif](https://i-blog.csdnimg.cn/blog_migrate/3fbf1ede8aa70fb056ac035ad4dfee5b.gif)
![7e34fc46d8ac2d879a22127503083c21.png](https://i-blog.csdnimg.cn/blog_migrate/b2da27ac2517c5b42327a4bac5c9315c.jpeg)
Flagsmith - 可以制作旗帜的字体
借助 OpenType 的强大功能,Flagsmith 可以将字符转换成图形和花纹,进行混合以及叠加,从而组成旗帜。并且,生成的旗帜依然可以编辑,可以像其他字体一样放大缩小,或是更改颜色。
Flagsmith - A Flag Building Typeface
⏬https://pan.baidu.com/s/1-w2vBywMOd5o2LztW-ET2w
![fc55aaf551c26a667445cf8064491eeb.gif](https://i-blog.csdnimg.cn/blog_migrate/4e8e93399045c4ed18edd309a0f76ce2.gif)
![7fe8d15f57584cf1f2cb03a540c3fb90.png](https://i-blog.csdnimg.cn/blog_migrate/d4989157309988aff4aa7c5777517273.jpeg)
Color Dot Font - 彩色圆点字体
这是一套由彩色圆点组成的字体,每一个拉丁字母都被圆点替代。可用作预览界面上段落的排版效果。
And Repeat — Color Dot Font
⏬https://andrepeat.com/fonts/AndRepeat-ColorDot.otf
![518d2fea47d0e1af696d76b7f5aae9db.gif](https://i-blog.csdnimg.cn/blog_migrate/1f69d63c2aee7b713593260918bc93dc.gif)
Font Awesome - 包含 1515 个图标的字体
Font Awesome 为一套原本为 Bootstrap 设计的矢量图标字体,它可以被定制大小、颜色、阴影以及任何可以用CSS调整的样式。通过下载 fontawesome.otf ,在 cheatsheet 页面找到合适的图标并粘贴在本地来使用它。
Font Awesome
⏬Font Awesome Free for the Desktop
![cb5219d6f3c22cd3fa10009f2ddc176b.gif](https://i-blog.csdnimg.cn/blog_migrate/4469e742e40eedda68266f6b5d33d679.gif)
Fontello - 图标字体生成器
类似于 Font Awesome 的矢量图标字体。集成 Font Awesome / Typicons / Entypo 等多家开源矢量图标字体(你也可以单独访问这些图标官网)。使用方法与 Font Awesome类似:在 Fontello 首页上选取你需要的图标集和尺寸,并下载压缩包。安装 font 目录下的 ttf 字体文件,打开 demo.html 复制需要的图标。
Fontello
![c1b4cac199da422e625976cbc3cf5377.gif](https://i-blog.csdnimg.cn/blog_migrate/393b9f5a307aca3a8f36e09b9f081f11.gif)
Prototypo - 创造无限字体样式
由 Google 与 Production Type 合作的, Prototypo 生成的参数化字体 Spectral。通过物理传感器反应环境变化,更改字体的宽度、曲率、线宽、衬线样式、倾斜角度等多种参数,从而生成适用不同场景的独特字体。
参数化字体 Spectral
![835ff91029a2d614019026a21285cb32.gif](https://i-blog.csdnimg.cn/blog_migrate/0874a9ecb4605ad6d7b84ac93acd5757.gif)
Bungee - 城市招牌风格彩色字体
Color Fonts 即包含多种颜色,阴影或渐变,纹理或透明度的字体(emoji 即是一款彩色字体),而在不支持的设备环境中则被渲染为单色字体。目前,OpenType SVG (W3C)是彩色字体的标准。Bungee 是一款支持 OpenType SVG, COLR/CPAL(微软),SBIX(Apple) 的城市招牌风格彩色开源字体,它同时支持水平和竖直场景。并且拥有5款字重和风格,你也可以直接在 Bungee 官网编辑生成字体素材并支持多种格式导出。
Color Fonts - Bungee
![0f5659887adfe218149a2aab2528e27f.gif](https://i-blog.csdnimg.cn/blog_migrate/9f4aa810260898c1d160a4d9730b376d.gif)
whose.design - 发现更多设计工具www.whose.design
扩展阅读
- 插件:CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya | Runner Pro
- 技法:Library | Colored Text | Symbol | Shared Text | Resizing | 流程图 | 文档 | 表格
- 工具:InVison Studio | Nucleo | Feedly | Phase | Studio Platform | Overflow | Talebook | Framer X | Whimsical | Eagle | Bear | Sip | XMind Zen
- 案例:Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe | Airbnb
- 专题:阿里工具 | 亚赛大人