Maemi Special

这是我给 Maemi 的生日（6 月 24 日）礼物，也就是我在朋友圈里说的很快会有的「第二个」公开的网页前端作品。这里加了引号是因为这件作品制作完成比九十九度 2017 毕业清单来得早得多，仅仅只是因为时间原因没有公开而已。所以，这可以算是我的第一份前端作品了。

由于是第一次从 0 到 1 做完整的设计和开发，第一次上手花了不少的时间。设计最初的启发是来源于 Adobe Typekit 制作的 Source Han Serif 思源宋体页面，页面中精致的线描动画可以说是百玩不厌了。于是我通过 Google 学习了此类动画的做法并以此做为核心去设计。整个页面的版本经历了两次迭代，每个版本的设计都经过了 revamp，现在上线的是第三个版本。

正如之前所说，SVG 动画是页面中的一个小亮点。此外，web font 技术的应用也得到体现，为了保证各个设备的统一体验，整个页面的所有的拉丁字母都涉及 web font，包括标题字的 Avenir Next，带有衬线的优美的 Cochin 字体，以及无衬线的 Vegur 字体，前两者使用在 Fonts.com 上购买的 web font 授权，Vegur 字体则本身是免费商用字体。在 web font 的配置中，还优先使用了系统自带的字体（如部分 Apple 设备中自带 Avenir Next 和 Cochin），免去了重复下载的多余。

该页面采用了响应式设计，在小屏幕设备也能获得舒适的体验，此处特别感谢张晴、陈觉晓、杨一帆等友人在设备测试上的帮助。需要提醒的是，由于 Microsoft Edge 在 SVG transition 动画上的支持不完整，无法正常显示动画，故在 Microsoft Edge 上我去掉了动画替换为静态的 SVG，而在其他浏览器上动画的显示都是正常的。

Maemi, happy birthday. ❤️

点此进入「Maemi Special」网页