更新日志有什么用?所有功能由自己实现的技术网站大部分都会编写一个更新日志来点滴记录, ZSFT 版本号以 N.N.N 的格式展现,分别为 [深度改变的更新] . [更新] . [更新的修订]。这不是一个专业的更新日志,而是比较喜欢采用修辞手法和夸张表达的更新日志。
【新增功能】 增加一个全局性的看起来还不错的 Footer ,将原本只有在首页底部展示的内容展示到 Footer 。
【新增功能】 全局性 Footer 中新增 状态 页面,可展示当前系统状态概述,点击后可以查看 ZeoSeven 所有域的状态和回溯过去 90 天发生的事件。
【视觉优化】 优化导航栏选项选中和悬浮效果,为其增加淡灰色边框和选中时更加浓重的背景颜色,使其更加立体。
【功能强化】 详情页中,预配置预览词汇现在可以根据字体支持的语言来判断显示什么,优先级如下:
简体中文、繁体中文、日文、韩文、英文、藏文、泰文、女书、变体假名、阿拉伯文、蒙古文。
很难看到详情页的预览配置词汇是日文,因为基本在繁体中文这里就成立而使用繁体了,很少有只支持日文或只支持韩文的字体。
【视觉修复】 未来没有可能再看到字体卡和字体详情页的字体名称不一致的问题,现在直接使用字体索引数据作为详情页数据,之前因为不会跨文件挂载读取,所以详情页和字体卡使用的是不同的数据才导致偶现的字体名称不一致。
【功能强化】 详情页的语种预览模块固定几种语种预览并不银杏,尤其是支持语言较少的小字库,会导致视觉效果降低,现在可根据字体支持的语种来显示不同组合的语种预览句,以减少小字库的语种预览模块全是 X 的视觉削弱问题。世界语和阿拉伯数字固定输出。
【视觉修复】 进一步淡化滑动条的蓝色。
【信息强化】 在详情页底部设置长篇文章做一预览,文章根据字体支持语种输出不同语种组合的多种语种长篇文章。
【视觉优化】 字体介绍模块原先如果字体没有介绍,会显示 “暂无介绍 ...” ,但这会感到莫名其妙,现在,当字体没有介绍时,将不输出字体介绍模块,以提高简洁性。
【BUG修复】 修复了字体卡上如果有设计师小图标,当小图标为多个时,与上方字体名称的间距非预期的消失而导致的视觉问题。
I am wxy,这是我第一次独立进行的一次更新,此更新可能会被 ZeoSeven 撤销或覆盖。所以在版本号后添加 .wxy 。
我并不喜欢 ZeoSeven 自认为的圆角 UI 组件非常美观,而无圆角 UI 组件更加沉稳,即便字体标签使用的无圆角方格最终被替换为圆角方格,但是我修复了字体索引数据, ZeoSeven 称之为字体卡,上的鼠标悬浮效果替换为无圆角,并删除在字体卡上的字体标签。 ZeoSeven 对圆角 UI 的执着甚至在字体卡上分明无法使用全部圆角,也要使用仅底部圆角这样神似指甲盖的样式,已经使用无圆角 UI 替换。
修改了 “浏览和筛选字体” 文本到 “浏览 XXX 款免费商用字体” 当然,这样做还有一个好处可以让这个选项在导航栏占据的宽度更长,因为它的确是主要页面。
关闭提交设计师信息页面,完全转向邀请制和自收录制。
【信息强化】 在 ZeoSeven 后端工程师 wxy 的强力帮助下,使用一种奇怪的方式使得字体索引数据可在字体详情页中读取,因为现在字体详情页可以读取字体索引的数据,所以在详情页的字体名称和链接下新增和字体卡上一样的标签块,额外多了一个字重标签块,同时支持点击标签块来直接启动筛选器。
【功能强化】 已完成筛选器的条件完善,现已可以筛选所有字体。
【信息强化】 在字体卡上新增标签块,可显示风格和支持的文字。以不同颜色区分。
【视觉强化】 增加滑动条样式,以 ZSFT 主题色作为颜色,并将滑动条应用 “细狗” Thin 模式,使其更不易影响主要内容。
【BUG修复】 筛选器在出现没有符合条件的字体时,没有输出 0 / 字体总数,而是只显示一个绿色方块,并且错误模块呈现崩裂的样子,因为它错误的被输出到了应该显示当前符合条件的字体总数的位置。现已修复。
【功能强化】 先前的筛选器在应用条件后,无法保存状态,即便筛选器的确存在条件,但相应条件的项也不会呈现被选中的状态,即每次点击筛选后,筛选器都会被初始化而呈现没有条件的状态,实际上是有条件且已经筛选完毕了的,现在使用独立的逻辑仍然是自己接收自己的查询参数,来确定要选中哪个项,以实现筛选器的状态保存。(实际上筛选器还是会被初始化,但会根据查询参数来确定需激活的项)
【逻辑优化】 筛选器在筛选字重时,输入 0 会指示筛选器直接去匹配字重为 0 的字,而这是不可能的,现在将 0 视为空值和 null 让 0 值被视为不限来匹配。
【视觉优化】 字体详情页中的所有按钮都已使用 ZSFT 的预配置按钮类,旨在统一化视觉效果和美观度。
【视觉强化】 再次新增 1 个预配置按钮类,以浅绿色为基底,具有触控反馈,结合之前预配置的淡蓝色和淡红色按钮类,目的以提升 ZSFT 的主题颜色和风格一致化。
【视觉优化】 在字体详情页的 右侧模块(移动端位于最底部) 中的所有按钮,现在都替换为 ZSFT 预配置按钮类,以提升视觉效果。
【视觉修复】 在选中文本状态下会使用浏览器默认的高亮颜色,现在使用 ZSFT 主题色进行替换,以更弱的视觉效果进行反馈和风格一致化。
【功能优化】 将更新该字体按钮从直接折叠表单修改到一个独立的页面,可修改字体的大部分内容。
【BUG修复】 筛选器的特殊许可证 CC BY-SA 因为带有空格,而空格并不是 URI 标准字符,导致传递参数时传递为 + 号,从而错误的匹配,现已修复。
【兼容强化】 筛选器中语言的传递参数为 ?lang= 但是后跟的却是中文,而 URI 的标准字符也不包含中文,在部分浏览器中不会自动解码,现已使用 JavaScript 接收参数时使用 decodeURIComponent 解码来修复。
【新增功能】 浏览字体页面新增 “筛选器” ,其中可以同时匹配多项并使用自己接收自己的查询参数来做到筛选。即便拥有强大的筛选器,查找功能的全部逻辑仍然照旧。
【视觉强化】 新增两个预配置按钮类,更符合 ZSFT 的主题,分别为淡蓝色按钮和淡红色按钮,都具有触控反馈。
【功能强化】 首屏增加醒目的淡红色按钮类可直接跳转到 “浏览和筛选字体” 页面。
【视觉强化】 表单页面,包括提交字体和提交设计师信息页面,都使用淡蓝色为主题重绘了 UI 控件。相较于原来的 “灰头土脸” 的样子更符合 ZSFT 的主题色 #0096ff 。
【BUG修复】 修复了首页底部列出的选项图标过大的问题。
【BUG修复】 修复了 “无限滚动” 在屏幕滚动过慢时无效的问题。当然,如果想要去点击 “加载更多” 按钮来手动加载,也是可选的,只要滚动的足够慢,就可以看到加载更多按钮。
【功能优化】 现在, “中文等 CJK 字体” 选项和 “西文和其它字体” 选项被归类为 “大类” 并丢出导航栏,现在可以使用 “浏览字体” 页面或首页底部选项 来进入这些大类别页面,并在大类别页面中增加面包屑导航来回到 “浏览和筛选字体” 页面。
【视觉修复】 修复了西文字体卡中,协议模块和字重数量模块出现向左偏移的问题,同时修复了西文字体卡缺少一个 div 结束标签 /div 导致多渲染 1 个空的 a 标签。
【视觉强化】 新增多个设计师判断逻辑,以显示两个以上设计师合作得出的字体的设计师 LOGO 。
【功能强化】 字体详情页中,现在点击设计师的 LOGO 可以前往设计师主页,或者点击下方的设计师主页按钮,但在多个设计师或没有设计师主页时,下方的设计师主页按钮会被替换为 “查找设计师的其它作品” ,这样以来,在多个设计师合作的字体中,可以点击 LOGO 前往特定设计师主页,也可以点击 “查找设计师的其它作品” 来寻找他们还合作制作过哪些字体。
【视觉强化】 首页甚至可以为我那一位故人提供一个练习两年半的场地,为了防止我那位故人成为练习生,所以决定添加一些装饰,当然不是纯花瓶,而是具有功能的装饰。首页顶部添加了一个 “假搜索框” ,因为不需要考虑搜索算法而只需要关注样式,所以它比真的搜索框更美观,点击后跳转到 “查找” 页面;使用栅格系统在首页标题位置的右边设置一个 “快速开始” 模块,其中包含了所有预配置分类,并使用 ZSFT 的主题色 #0096ff 作为阴影。
【视觉强化】 查找页面的搜索框一直呈现 “灰头土脸” 的灰色,现在使用 ZSFT 主题色 #0096ff 并优化边角和选中反馈。
【功能强化】 查找页面的搜索框将在页面加载完成后立即获得 焦点(选中) 以实现可以立即开始输入。
【视觉强化】 “加载更多” 按钮从 BETA 版本一直没有进行样式修改,因为有 JavaScript 自动点击来实现 “无限滚动” ,没有人会注意到甚至没有看到过 “加载更多” 按钮的样子,当然,也只有开发者会关注自己编写过的所有组件,现在对 “加载更多” 按钮进行样式优化,添加了图标和上边距。
【视觉强化】 将 字体详情页 的字体名称和来源模块统一为一个容器,并放置于栅格系统外部,以做到可以将字体名称和来自居中显示,更符合网站主要排版方式,即每个页面的主名称和描述都以居中显示。
【反馈强化】 搜索结果中将显示 “共找到 N 个匹配项” 的文字,这一简单的实现,在 ZeoSeven 那全是 if...else 的搜索匹配逻辑中可以称为是 ZeoSeven 的一大步!(刚开始还因为搜索后删除再搜索匹配的项总数被叠加,甚至出现 “没有找到与 XXX 匹配的结果” 但下一个模块显示 “共找到 NNN 个匹配项” 然后实际没有结果的奇怪问题。)
【功能强化】 字体详情页中, “嵌入字体” 模块上方新增 “语种预览” ,在 CJK 字体中为 英文、 CJK 和阿拉伯数字,在西文字体中为 世界语、英、俄、法、希腊、西班牙 和阿拉伯数字。如果字体缺少某个字符,将会显示为 X 。
【视觉修复】 字体卡上,悬浮会反馈一个具有圆角的灰色背景并去除边框,但是,技术上来说,上一个字体卡的边框不能通过常规方式在这个字体卡被悬浮时去除,所以在悬浮时会呈现出上方有一个横线的突兀,原先使用 “掩耳盗铃” 方式将边框的颜色设置为悬浮背景灰色一致而很难看出来,但分割线也被淡化的太淡了,既然上方有一个横线导致突兀,那么就加入到横线上,将圆角设置为贴合上方分割线的尖角,并加大悬浮时下方的圆角,做到无法去除上方字体卡的下边框,就贴合上去以不再显得突兀。
【视觉强化】 字体卡上现在也已支持判断是否为入驻设计师,并显示其 1:1 的 LOGO 到设计师名称前,也就是字体卡中字体名称的下方。
【视觉优化】 Bootstrap 框架的栅格系统好用,爱用。使用栅格系统将设计师主页的 LOGO 和 描述性文字分开,但一些设计师因为缺少社交链接或简介内容,导致左侧栅格显得空白,而这不能由 ZeoSeven 自主修复。
【视觉优化】 将设计师索引页面的最小栅格设置 .row-cols-2 类,这样以来,在移动端也可以一行浏览两个设计师 LOGO ,而不是在移动端会有一个特大的占据一行的 LOGO 直接怼脸上。
【视觉修复】 搜索结果页面仍然使用 Version 3.13 之前的字体卡样式布局,现已修正。
【视觉强化】 将字体卡片正式修改为字体列表,并去除颜色。以更加简洁的方式展示。
【功能强化】 字体分类 选项新增 “特定许可证” 类别,并支持查看许可证信息。
【视觉优化】 设计师索引页删除设计师名称仅展示 LOGO 以达到更加简洁的目的。
【视觉优化】 重新排列和选级导航栏项以更加清晰。
【逻辑优化】 使用著名的 “猴子排序” 完全绝对性随机排序 “全部字体” 页面。
【视觉强化】 字体卡背景渲染颜色新增 “落叶金”,“轻紫罗兰”,“淡蓝” 和 “轻黑珊瑚”。
【视觉优化】 弃用作用较小的字体详情页信息 “字体完整 WOFF2 大小”。
【功能弃用】 因太多恶意上传的文件到达服务器,而 64KB 的文件大小实际没有太大实用性。“上传” 功能已弃用。
【选项移动】 “提交字体” 移动到导航栏一级。
【效率强化】 大一统第三方的功能集成,并全部放在统一的位置。只需要加载一个 js 文件,大大提高了加载效率。
【新增功能】 新增 “新的设计师主页” 功能。
【视觉强化】 将 “提交字体” 页面简洁化,不再使用悬浮标题。
【功能优化】 字体详情页中的设计师信息模块新增判断,如果设计师拥有主页,模块会展示设计师 LOGO 并且下方的 “设计师的其它作品” 按钮会变为 “设计师主页” 。
【兼容强化】 完全从 HTML 语法转到使用标准的 JSX 语法。
【性能强化】 弃用单独的 data.js 数据集和筛选逻辑,直接全局定义。已删除 data.js 文件。
【BUG修复】 修复了所有页面的预期控制台警告和报错,现在,不会再出现预期的报错和警告,只有 log 。
【性能强化】 因之前从原生 HTML/CSS/JS 开发转到 Next.js 开发时,为了快速换栈,使用了 dangerouslySetInnerHTML={{ __html: PageInfo }} 方法直接填充 HTML ,而不是编写 JSX ,这导致多余的构建和资源消耗,还会导致页面加载效率更低,现已完全转到 Next.js 原生使用的 JSX 语法。
【性能优化】 main.js 文件直到换栈都一直作为唯一的客户端逻辑文件,并使用 tagid 判断函数是否执行,所以 main.js 文件中包含了所有页面的客户端逻辑,这导致一个页面的加载效率低下甚至是多余的资源加载,而自 ZeoSeven/Qiu 了解到 Next.js 的 useEffect 和 componentDidMount 后,现在客户端逻辑已分散到各个页面,按所需加载对应客户端 JS 逻辑。
【BUG修复】 修复了如果在 “更新日志” 页面点击导航栏中的 “定价” 选项时不跳转到定价页面的问题,这是因为定价选项错误的使用了更新日志页面的 tagid 索引来判断路径,导致在更新日志页面时,变成了 “在更新日志页面的同时在定价页面” 的叠加态,最终导致 JS 判断为用户既在更新日志页面,也在定价页面,这时候点击定价没有导航到定价页面是预期的。(用户: 我要前往定价页面。 JavaScript: 你不是已经在定价页面了吗? 用户: 你眼瘸了吗?)
【BUG修复】 在一些没有 #tagid = ens-font 标识的字体中会被判断为 NULL 而没有类别, JS 直接懵圈无法选择合适语言的预配置词汇数组,导致预览框显示空白,这是 Version 3.6 版本视觉强化所带来的问题,现已修复。
【性能强化】 在 Version 3.6 版本中,使用了非常奇怪的判断方式去判断预览词汇,这导致性能问题和输出字体卡延迟,尤其在低性能设备更为显著,现在简化为 先根据要渲染字体卡的编号在 data 中遍历寻找,然后接受一次字体名称值,根据 [] 判断来确定字体语言类型,再经过连续 if 块后直接输出。相比之前的臃肿判断方式更为效率。
【视觉强化】 在字体卡上, [] 中的内容默认不会输出到页面上而是仅作为 JS 判断语言的依据, Version 3.6 版本将 [] 中的内容输出到字体卡下方的辅助信息中使用了 4 栅格,这导致常规的 CJK 和西文字体也有 4 个栅格,常规的字体卡辅助信息中较长的作者名称右边明明有很大地方但是才到一半就会显示省略号,很影响观感,这是因为右边被 1 个栅格所占据,而这个栅格是为特殊字体 (具有 [] 元数据的字体,如:女书) 显示 [] 中内容的栅格,常规字体是没有也不需要让 JS 判断 [] 的,现在又增加了一个 if 块和三元运算来判断第一个栅格 (作者信息栅格) 到底为 50% 还是 25% 来修复这个视觉问题。
【性能优化】 深度压缩 data.js ,源文件 59KB 通过 min 压缩到 42KB 再通过编码压缩到 26KB ,最后使用 GZIP 再压缩到 15KB ,这样以来,只需要加载 15KB 的文件即可将 将近 500 款字体的数据 和 筛选/输出逻辑 加载完成。全国 216 个节点遥测显示页面平均加载速度提高了 351ms 来到了加载完整首页平均只需要 762ms 。
【视觉强化】 使用了一种非常非常奇怪的方式判断字体卡的预览词汇应该是藏文、女书、泰文等等,方式在于
让 JS 模板字符串先接受 data 数组中的 h4 参数,
然后使用三元运算再判断来重新接受一次,
新建一个临时数组存储判断后的参数,
再遍历 data 数组再重新接受一次并保留之前修改的参数,
再通过 if 块判断使不同语言的字体接受不同的预览字符参数使其再重新接受一次最终参数,
再输出到页面上,
这很奇怪,甚至会导致在低性能设备上的一些输出延迟问题。
【视觉强化】 相比于字体卡中的预览词汇,详情页则更好控制,使用 DOM 操作获取参数并映射到数组进行 if 判断来改变预配置的换一换词汇。现在,藏文字的预配置词汇是藏文,女书的预配置词汇是女书,泰文字等等都一样。
【视觉修复】 修复了字体卡中的许可协议字符串如果较长,但没有出现预期省略号,导致换行的问题。
【视觉强化】 字体卡和字体详情页中的字体名称前的 [] 是判断字体类型的依据,但这仅仅是给 JavaScript 看的,比如一个字体前多了一个 [藏文字] XXX ,这对视觉效果会有负面影响,那很简单,通过两个名称,一个给 JavaScript 看,并在页面上使用 d-none 隐藏,另一个展示到页面上的相同位置并通过正则表达去除 [] 以达到仅显示字体名称的目的。
【视觉优化】 随着字体分类越来越多,在 字体分类 下拉菜单中使用栅格分出两个列并去除分类的 SVG 图标以达到最佳观感。
【视觉优化】 字体分类 中的分割线两边出现了非预期的距离留空,这是因为下拉菜单的选项对两边设置了距离以更好的观感和点击反馈,它们在一个容器中,所以分割线也会出现两边有距离留空,通过设置一个单独的选项容器,并将分割线置之度外以达到分割线不再有两边的留空,更好的 “分隔” 。
【功能强化】 对字体详情页中的 “设计师的其它作品” 按钮增加索引,即如果存在 “设计师主页” 的设计师则在点击后直接跳转到对应的 “设计师主页” ,如果没有,才会跳转到 “查找” 页面自动使用查询参数进行模糊匹配设计师名称。
【功能强化】 设计师主页新增 “全部字体” 模块。
【视觉强化】 为设计师主页的索引页的 LOGO 设置圆角,避免方形的尖角戳伤用户的头。
【功能强化】 字体分类由使用查询字符串在搜索中查询转到直接在单独的页面使用 JavaScript 判断来实现更好的分类页面。
【视觉修复】 修复了在一些 “刁民” 手中导致导航栏下拉选项在点击时,字体会呈现白色导致和白色的下拉菜单背景融合而无法看到列表项文字。
【法律问题】 基于 IPA Font License Agreement v1.0 协议的字体全部终止 CDN 服务,且不再收录任何基于其协议的字体,除非非常明确表示允许 CDN 分发。
【新增功能】 新增设计师主页,其中包括设计师的介绍,代表作品,设计师主页中的设计师只有在设计师本人或团队代表明确授权包括但不限于介绍内容和 LOGO 时,才会在设计师页面展示其主页。
【规则优化】 取消编号重用,为一个字体分配一个编号后,如果字体因一切原因被删除,详情页和 CDN 目录将显示不再可用和 404 错误码,而不是直接由新收录的字体重用。
【功能强化】 扩展查找功能的 !z= 匹配规则,支持指定范围查找,如 !z=6-9 即匹配 6, 7, 8, 9 种字重的项。
【性能优化】 因为 OFL 协议字体繁多,在匹配 OFL 时会导致低性能设备上非常卡顿,尤其移动端最为显著,这是因为查找逻辑使用 if...else 一个一个判断而导致的,但最关键点在于一次性输出近 300 个数据不同的卡片到 DOM 仍是低性能设备吃不消的,现已删除一部分 if...else 代码段,尽可能少的条件判断并保留功能。
【兼容强化】 对旧版本的 Edge 浏览器进行指示使用现代渲染方式。
【功能强化】 扩展查找功能的 !z= 匹配字重规则,现已支持范围查找,如 !z=10+ 即匹配 10种字重及以上 的项, !z=9- 则匹配 9种字重及以下 的项目。
【功能强化】 强化搜索逻辑,现在除了支持正常的 绝对顺序匹配(*) 和 相对顺序匹配 逻辑,还支持使用 半角感叹号(!) 来匹配特定值,如 !i= 将只匹配 编号(id) 值,还有其它的匹配逻辑可直接前往 查找 页面体验。
【视觉削弱】 因为网站需要加载大量的 WOFF2 文件来支撑预览功能,现在已经移除网站自己使用的个性化字体。使用浏览器默认 sans-serif 字体家族。旨在不阻塞字体预览功能。
【网站重构】 曾经看到像 Vue.js 或 React 的前端 JavaScript 框架十分困惑且不愿去查阅文档进行学习,而现在因为原生 JavaScript 通过浏览器 DOM API 向 DOM 动态添加的内容难以被 SEO 索引,有了将渲染方式从 CSR 转到 SSG 的想法,现在,通过 4 天的对肝脏的折磨,在只保留 CSS 样式的情况下,从原生 JavaScript 转到 Next.js 且完美的实现了原有的全部功能。( Next.js 中不能直接调用我最熟悉且最常用的 window 对象和 document 对象导致我前期一度想要放弃转到 Next.js 框架 )我很庆幸我只收录 450 余款字体使得索引和数据修改到 Next.js 并不是那么困难,但这其中至少有 2 天时间为了详情页的数据在折磨 Ctrl、C、V、S 键,这次的只保留 CSS 样式的重构使得我找到了很多问题,比如一部分 字体的设计师和字体名称 反了,导致了会被理解为 “这款设计师由这位字体设计” 的问题。
【功能丢失】 字体详情页复制功能的按钮复制成功图标变化仍然没有头绪,因为 Next.js 没有 document 对象,可能需要使用其它方法实现,暂时使用直接弹窗的方式传达是否复制成功。
【功能优化】 优化 404 页面,在 404 页面中包含具有导航栏,让遇到 404 Not Found 错误时可以直接点击导航栏导航到其它页面。
【兼容强化】 不再必须依赖客户端必须开启 JavaScript ,即便客户端没有 JavaScript 仍然可以显示内容而不是空白。
【视觉修复】 将导航栏中的选项图标和文字的颜色融为一体,不再突兀。并在到达选项的目标页面时全部呈现碳黑色。
【功能增加】 和 data.js 中连自己都看不懂的逻辑死拼二小时半,增加 “全部字体” 功能,并将导航栏中的 “中文字体” 和 “英文字体” 选项折叠显示。
【视觉优化】 字体详情页中,优化而使 边栏 信息栏的阴影更柔和,并新增一栏 “许可协议” ,删除了原本位于字体名称 右上角 的许可协议。
【视觉修复】 优化字体详情页的 “随机推荐” 模块样式和随机推荐的 “换一换” 按钮样式。
【BUG修复】 英文字体详情页中随机推荐的 “换一换” 按钮错误的显示为 “刷新” ,现已修复。
【视觉修复】 垂死梦中惊坐起,介绍应在最高处。很明显,对于新访客,还没有了解详情,字体直接怼脸上非常不狸猫,容易使新访客困惑两年半,经过非常高难度的一系列工程将介绍模块 Shift+Downnnnn -> Ctrl+X -> Uppppp -> Ctrl+V -> Ctrl+S 移动到最高处,其余不变,这样以来,首屏貌似更好看了一些?
【新增功能】 首页新增 “最受欢迎 前3名” 模块,用于展示不定期的请求次数最多的前三名字体。
【视觉修复】 将 “最受欢迎 前3名” 模块和 “最新更新” 模块移动至首页最上,以最直观清晰的查阅字体,介绍模块移动到它们和 “随机推荐” 中间,并优化了 “开始使用” 模块。
【视觉修复】 优化首页的 “最新更新” ,修改为直接展示字体卡片,而不是简单的字体名称 + 链接。
【视觉修复】 在首页的 “随机推荐” 中,排除 data 中定义的一些特殊的字体,比如 jsMath 系列、 Adobe Notdef 、 Adobe Blank 等会令人困惑的字体。完整列表中自然是不会排除的。
【BUG修复】 感谢网友 poetjudou 指出的 中文字体 CSS 文件在 cn-font-split v4.15.0 预定义属性导致了可变字体无法发挥效果的问题。现已完成修复。删除了预定义样式,使用浏览器预定义样式作为默认样式。完全转向由用户自己的 CSS 代码来更灵活的定义样式。
【BUG修复】 在一些喜欢另辟蹊径来使用的用户的查找页面中,有时候中文字体的预览词汇和英文字体一样,只有英文和数字,这代表查找功能对于筛选的编号并没有合理的分析是什么字体,现在使用了一种奇怪的方法解决。
【视觉优化】 引进新的工具提示 “Bootstrap 弹出框” 并定义高斯模糊和响应式,比原先的工具提示直接一坨黑色更加高雅。这在首页首先被应用,其次在 每个字体详情页中的英文子集化 查看字符时应用。
【响应式重构】 优化所有页面的最大宽度和 auto 水平 margin ,解决了在超级大的设备上页面松散且小设备水平边距过大导致内容拥挤的问题。
【BUG修复】 修复了导航栏在一些刁钻用户手中导致导航栏两边留空而失去模糊的问题。
【BUG修复】 修复了字体详情页复制失败后没有任何反馈的问题。
【BUG修复】 修复了查找功能在 V 1.2 中引入的 “没有结果” 反馈不显示且有时候在刁钻用户的手中导致有结果但仍然显示 “没有结果” 的问题。
【BUG修复】 字体详情页中的随机推荐模块在刁钻用户手中有时候会出现两个卡片位于一行,这会导致卡片直接被挤压成薯片,虽然不知是否好吃 ... 已修复。
【BUG修复】 修复了有时候右下角的公告弹出框无法关闭,这可能导致用户气愤到直接入土。同时这次更新将公告弹出框被关闭后再显现的时间从 2 小时调整为 12 小时。避免打扰。
【逻辑优化】 为字体详情页中的设计师的其它作品按钮设置了 * 号以触发 查找 功能的绝对顺序匹配。
【视觉优化】 ZeoSeven 意识到当前的字体列表不够现代化的原因是阴影过于浓重且具有边框,淡化了字体列表卡片的阴影,并去除了边框,同时修改了反馈逻辑,当悬停在字体列表卡片上时,去除阴影,将预览文字逐渐过渡为浓重的颜色,当点击后,为字体卡片增加黑色边框。
【视觉优化】 减少字体列表最大卡片数,从每行 4 个修改为 3 个,并且借助 ZeoSeven 最早设置的 每次只加载 12 个字体卡片的 12 这个数字的抉择,很好的兼容最大和每行 3, 2, 1 个卡片的显示。
【视觉优化】 增大字体详情页在大屏幕设备中的内部填充,以使页面更加紧凑。移动端仍旧是非常少的内部填充。
【视觉优化】 所有页面的标题和描述全部居中并采用相同的内部填充。抛弃了页面标题和描述都位于左侧的样式。
【视觉优化】 ZeoSeven 学会了对边框和分隔符的合理使用,在一些页面你应该可以看到少量的分隔线。当然包括 更新日志 也就是此页面,增加了分隔符来区分不同的版本更新。但不在完整版本日志后分割,而是在标题后分割以实现更快速的版本查阅和视觉协调。
【视觉优化】 起初,并不知道 Bootstrap 本身就具有好的 body 第一子容器 .container ,它不仅限制了最大宽度,还设置了最小水平内边距,以及自动的水平外边距,这相比我的 .bodyy 和 #bodyy 简单的设置了固定的内部垂直和水平边距更加健壮和灵活, JavaScript 已经修改, CSS 样式已抛弃 .bodyy 和 #bodyy ,更新后因为浏览器缓存,两小时内可能导致样式问题。
【布局优化】 对所有需要显示字体列表卡片的页面增大页面内部填充,以使得目光焦点于字体卡片中而不分散,因为每行最大卡片数从 4 修改到 3 ,所以字体卡片之间的间隔做了一定调整,移动端的间隔更小。同时去除非常大的 xxl 设备的字体卡片兼容,因为已经重构了响应式,在 xxl 设备上可直接使用 xl 的字体卡片布局。
【视觉修复】 修复了 xxl 设备上在字体卡片非常扁平,字体卡片上只剩下一行 “全世界无产者,联合起来!” 这不仅导致视觉松散,同时 “全世界无产者,联合起来!” 这句宣言在一行时失去了其表达力度。
【视觉修复】 原句 “全世界无产者,联合起来!” 基于绝对相同顺序而没有停顿,并不能体现出其表达力度,将后半句进行换行并使用居右的方式增加其表达力度。
【视觉修复】 未公开的 V 1.4 中本来要将 “全世界无产者,联合起来!” 作为预览词汇修改为 “ZSFT - 浏览上百款开源字体并使用免费的字体 CDN 服务” ,因为相似网站的字体预览功能都是产品的口号或精神。然而,原本的 “全世界无产者,联合起来!” 貌似使网站提升到了新的境界,并且具有其非常强大的表达力。
【词汇优化】 减小字体详情页中预览输入框中的字号,并重新挑选了 “换一换” 的预置词汇。
非公开版本。
查找功能优化,曾经使用绝对顺序的模糊匹配,被替换为单个字符的相对模糊匹配,而曾经的绝对模糊匹配现在已经融合到搜索框中,并附加一个可以直接匹配所有项,展示出所有字体的选项。
点击 查找 体验新的 JavaScript 逻辑。
字体详情页卡片样式更新,同时新增了下载按钮和字体简介。但出于对知识产权的保护和尊重,并不会直接展示字体原设计师的简介内容。会在对简介内容的许可协议查询或设计师发送授权简介内容后展示。
优化 JavaScript 搜索模糊匹配逻辑,原本如果要搜索 “Noto Sans CJK 思源黑体 SC” ,则需要输入 “思源” 或 “思源黑体” 来模糊匹配它,而新的匹配逻辑可以使用 “体源思黑” 或 “源思” 来匹配到 “Noto Sans CJK 思源黑体 SC”。
简单来说,从 ZeoSeven 自己命名的 “完整关键词模糊匹配” 修改到 “单个字符模糊匹配”。
因为国际边缘和中国网络的合并,英文字体详情页在 CSS 代码中提供备用冗余方案,在 CDN 不可用时,直接由 源服务器 提供文件。
中文字体详情页提供可选的备用冗余方案,使用 JavaScript 实现的 IIFE 动态添加 LINK 标签,并在 CDN 不可用时,直接由 源服务器 提供文件。
这当然不是对 CDN 的不自信,毕竟 CDN 本身就拥有很多冗余方案,这只是为了在非常非常极端的情况下仍继续提供字体加载。
经过非常充分的测试之后,预览版本在 RC 15.4.1 正式终结。
难以置信, ZeoSeven 将国际边缘 zsftcdn.zeoseven.com 和中国网络 zsftcdn-cn.zeoseven.com 正式统一到 static.zeoseven.com 。zsftcdn.zeoseven.com 和 zsftcdn-cn.zeoseven.com 将继续正常运行,但不再提供文件,而是重定向到 static.zeoseven.com ,当哪天开发者看 DNS 记录中的 zsftcdn 和 zsftcdn-cn 的 A 记录不顺眼时,就会将其删除,届时将被终止,但实际上这些域正常提供重定向到 static.zeoseven.com 至少 1 个月。
【字体预览优化】 在字体列表,随机推荐和搜索结果中的字体卡片中,如果一款字体字库缺字,将直接显示为 X (使用 Adobe Notdef 字体),而不是使用系统 monospace 字体替代。字体详情页输入预览功能照旧使用系统 monospace 字体替代。
修改字体详情页的 main.css 文件加载逻辑,不再使用 JS 动态生成 LINK ,解决了首次进入详情页时,样式短暂崩溃的问题。
移动任何位置的 JS 代码,统一到 main.js 并由 if 语句判断此页面是否需要执行,使得 .html 文件中不会再出现 JS 代码。
删除了 “有字体需要更新 /post/update-font” 页面,融合到字体详情页的 “该字体需要更新” 按钮中,不再需要输入字体编号, JavaScript 自动获取,简化表单提交和页面繁杂度。
字体详情页新增 “设计师的名称有误或非正式名称” 选项,和 “该字体需要更新” 一样融合到链接中,同样不需要输入字体编号,只需要输入需要纠正的设计师名称。
优化字体详情页,最初,字体详情页的所有字符全部都显示对应详情页的字体样式,这导致一些缺字或字符潦草的字形的字体详情页无法得到信息,修改为部分为对应详情页字体的样式。现在,继承全局自定义字体,字体预览不受影响,这之后,将不会在 fonts.zeoseven.com 看到任何一个浏览器默认字形的字符,除非在字体预览中字体缺字才会由浏览器默认 serif 继承。
当我仔细阅读了所有 “作者声明” 字体的法律文件后,一瞬间,产生了大量的主要由 氢和氧 组成的不明物质。
去除了三十余个具有法律禁止二次分发和旧字形、废弃字形等字体,中文字体从 253 的数量降低至 220。
没人会喜欢大老粗式的公告弹窗,我也是这么认为的。更为小巧可爱的或许更加的不打扰浏览体验。
点击 X 之后,将会在 12 小时内不再弹出,使用 Window.localStorage 。
字体详情页新增 随机推荐 模块,并添加了 “刷新” 功能。继续使用仅客户端 JavaScript 让字体索引数据随处调用。
ZeoSeven 尝试在字体卡上增加了不一样的颜色渲染,当然在背景颜色挑选上,会尽量更符合大众审美,而不是一些 ... 屎黄 ...
首页太过单调,没有颜色,很容易被 “卡颜” ,虽然 ZeoSeven 并不擅长设计,但也使用了将近 3 小时的时间去设计首页的 CSS 。增加背景,阴影,边框,颜色和渐变。
字体详情页中的灰色卡片样式看起来并不奇妙,修改为无动态效果的白色卡片或许更加美观。
字体详情页中的作者模块新增 “此作者的其它作品” 按钮,当然,纯前端实现或许有些问题,因为 data 是由 JavaScript 定义,和字体详情页中或许有差别,但 ZeoSeven 已经进行了统一。或许会漏掉一些也不是不可能 ...
少量内容,比如 英文子集化选项 中的 “查看字符” 不再跳转,修改为 “工具提示” 方式显示。对应页面已删除。
中国网络新增 3 台支持 HTTP/1.1 的 IPv4 边缘服务器。
api.zeoseven.com/zsft 修改到 zsftcdn.zeoseven.com
api.zeoseven.com/zsft 将继续支持到 2024年7月15日
2024年7月15日 后 api.zeoseven.com/zsft 将重定向到新域
ZeoSeven 最愚蠢的决定就是将CDN提供域设置在 api.zeoseven.com/zsft ,这明显导致了很多问题,现在,修改到专用提供域: zsftcdn.zeoseven.com 且未来绝对性的不会再做任何修改,只需要将 api.zeoseven.com/zsft 替换为 zsftcdn.zeoseven.com ,因为在新域,不再需要 /zsft/cn/ 或 /zsft/en/ 而是直接性的 /cn/ 或 /en/ 。另外,旧域 api.zeoseven.com/zsft 将继续支持到 2024年7月15日 后终止。并延长支持重定向到新域直到服务器不再可用。
在 RC 9 版本中,合并了字体数据到一个文件,而又需要多页面使用,那么就需要 JavaScript 逻辑非常健壮,然而它在没有报错的情况下,在汉字字体和英文字体中,因为加载更多没有使用 AJAX 只不过是不触发字体请求和随机排序,这时候,加载更多按钮的生成逻辑无法去除之前生成过的项,也就出现了上次生成过的项,现已修复。
完全去除 “下载” 功能,专心为 CDN 分发进行优化。
ZeoSeven 真的做到了合并字体数据,将所有字体数据合并到一个文件,并通过 “自认为” 非常健壮的判断代码来判断所在的页面并执行所需的筛选和生成,终于不再需要搜索页面一个数据、汉字字体一个数据、英文字体一个数据。现在只需要加载一个数据文件即可。
“上传” 功能因成本问题已不再可用。可直接提交字体并等待 ZeoSeven 完成收录。
ZeoSeven 多少有些老蝉的清除了边缘服务器缓存,导致加载速度暂时降级。
不知何时起, api-r2.zeoseven.com 的适用于 CORS 的响应标头丢失,不过还没有被很多人发现,已经修复。
因为字体的更新迭代通常需要很长时间,毕竟 ZeoSeven 甚至收录过 20世纪 到现在还没有更新的字体,故将 Cache-Control 响应标头从 24天 修改为 两个月半,因为 ...
字体列表随机颜色和随机语句并不妥,因为无法直接看出,眼花缭乱,字体又太小,故而,将列表的字体卡片统一颜色,统一语句,加大字体大小,而这统一的这个句子,必定是最简短而最具有意义的。
拥有肝帝的力量,胜利是理所当然的实际上, ZeoSeven 原定于 6月26日晚22点 进行这些更新,因为这些更新会中断服务,但因为开发者效率足够高,在 6月26日下午16点12分 已经完成 HTTP/3 QUIC 和 IPv6 的兼容,这些现代技术将使得加载效率和安全性进一步提升,在 16点9分 ~ 16点11分 中断的服务,现已恢复,但边缘服务器需要重新缓存,所以刚开始会较慢。
优化前端 JavaScript 代码,使其执行更快,同时删除了部分只会报错的无用代码。
我曾尝试增加上游服务器实现负载均衡,当然,的确获得了一些国内外云 CDN 厂商提供的节点,目前为 3 个,分别是非公开版本。
非公开版本。
非公开版本。
非公开版本。
非公开版本。
非公开版本。