重庆的风何时能够吹到归家千万里的我呢。

WindFul.CN 备案通过

2024 年 6 月 11 日提交备案信息,13 日收到来自管局的备案通过短信,效率是当初备案 THYUU.COM 的 3 倍。而设立这个域名是为了更好定义博客。风记星辰原本是备案 THYUU.COM 时提交的网站名称,提交定义时没有想那么多。后来察觉直接用于博客的正式名称十分不错。而网站无论是内容还是主题都一切为了这个名称不断切合,只是当初定义 THYUU 域名的含义过于广泛,无法具体化。查看 THYUU 域名含义

那么,WindFul.CN 更具体化地为大家展现出了含义,字意化的域名就不过多介绍了。选择 .CN 是因为从域名得知网站是中国建立的,我国实力必将日益强大,使用它让我更具荣誉感,包括我的 outlook 邮箱也是使用绝版的 @live.cn,并且它也是我第一个.cn 域名。虽然现在.cn 的域名会在 whois 展示登记信息,但如今的国内环境即使不注册.cn,也会在备案信息处得到查询。在当下简中环境,我能够感觉的,是未来唯一的选择只能备案,除非远离简中环境。不多说了,社会导向如此。在国内,不都是实名上网吗 😂

因此,WindFul.CN 将专属于风记星辰博客,而 THYUU.COM 未来将会赋予出更深层的意义。为了对搜索引擎和外链友好,因此在没有赋予到 THYUU.COM 前的转移工作不进行,在此期间还请您继续使用 WWW.THYUU.COM 访问,友情链接信息无需修改

Tabular-nums 字体特性

CSS Tabular-nums 表示数字等宽,这在文字排版时尤其重要,它是 font-variant-numeric 中的一个特性,表示控制数字、分数和序号标记的替代字形的使用。而 font-variant-numeric 又是 font-variant 中的一个特性。具体可至我之前的文章了解 #font-variant ,效果可至 MDN Web Docs 查看

然后当我应用到某一处时没有任何效果,经过发现原来是字体不支持。于是我在 Google Font 上寻找支持该特性的字体,Google 没有单独设置筛选,我于是只能打开浏览器审查,对显示字体的 DIV 加上这个属性,于是就发现了一个不错的字体,它就是 Red Hat Display —— 一个使用 SIL International 许可的开源字体,任何人都可以下载和使用。

Red Hat 字体家族

文字是红帽品牌形象的重要组成部分,字体也是如此。文字的外观可以强化它们所要传达的信息。红帽® 字体系列是由字体设计师 Jeremy Mickel 与我们的设计团队携手专门为红帽品牌设计的。

我们字体系列的每个字符都由完美的圆和匀称的直线组成。它们让字符充满几何美感,理性睿智,而且工于设计,彰显了受我们品牌历史启发的人文关怀。每个字母舒展开放的姿态,巧妙平衡了字母之间的紧密间隔。

来自 Red Hat Display 官网 访问红帽字体品牌规范指南

因此,我决定把字体调用在网页中,直接使用 Google Font 的在线链接,速度相当不错。

// 在 HTML 调用字体资源
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap' type='text/css' media='all' />

// 在 CSS 调用字体资源
<style>
.body {
	font-family: 'Red Hat Display';
	font-variant-numeric: tabular-nums;	/* 使用等宽特性 */
}
</style>

// 在需要定义字体的 font-family 处添加字体名称,例如上述
// 注意调用顺序,例如上一个字体支持字母和数字,则是无效

除此之外,Red Hat 字体家族还支持两种不同情况的字体,可在上述链接处 &display=swap 前追加调用链接:

  • Red Hat Text 正文字体,适用于小字等:&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700
  • Red Hat Mono 等宽字体,适用于代码等:&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700

经过观察 Red Hat Display 和 Red Hat Text 最大区别在于字体小于 18px 时,Red Hat Text 能够展现的更清晰。总之,从设计师的角度来看,这是一个非常好的字体。

中文与英文字体混合排版见解及设计倡导

虽然该字体支持特性,但也不要乱用 tabular-nums 。等宽设定适合在需要文本对齐的情况(例如列表等)使用,如此不会因为数字而显得排版错乱,这点就和中文方块字很有不同。既然聊到字体的特性,我想谈谈我的中文字体排版见解,同时也提出适合中文网页的设计倡导。

随着 web 技术的不断升级,中文和英文的字体排版也在持续适应,但由于中文和英文本就在设计上有所不同,所以造成了很多的样式并不适合中文。例如英文字体是有基线的概念,而中文却不同。所以你会发现 CSS 的 vertical-align: middle 在有些情况即使设置居中也不会是居中。因此,这也就是为什么大部分情况下国外赞不绝口的网页设计,弄到中文显得有些格格不入。以下列举几个简单的例子,并给出倡导建议,欢迎参考。

增加适合行距

CSS 设置行号的 line-height 属性,在同样是设置 1.5 倍行时,由于有基线的设计字体概念,小写英文字母并不会占满整行,所以英文下的行距看着要舒服一些。而中文是方块字,就显得比较紧密。而在实际人们的阅读情况,一个人在使用双眼聚焦某一段落时,最多只能照顾到上下共三行。如果行距过于密集,会造成看错行。因此建议设置的行距数字,能够聚焦到上下共三行的距离即可。换句话说,也是你的余光能够看清上一行和下一行即可。

保留中英空格

除了对字体本身的问题,再者就是中文和英文之间空格的问题,其实大家养成在中文与英文之间插入空格的习惯,毕竟在输入 Happy birthday 时,你也会在英文不同的词语之间输入空格,而不是输入 Happybirthday ,所以就把英文两边的中文也当成英文词语那个概念吧。

适应标点符号

我们在混合输入中英文时,会使用符号来辅助说明,但在使用中文时使用中文全角,英文时使用英文半角,如果是中英文混合,还需结合整句情况选择合适的符号。

正确表达示例

Red Hat Display 和 Red Hat Text 支持扩展的拉丁字符集,大多数欧洲语言都可以使用。对于其他语言(如中文、日文、韩文和西里尔文),请使用 Noto Sans (goole font) 字体系列。

结合上述,我从中文与英文在网页中排版设计的角度提出了倡导。而更多设计推荐查看六蛋老师的精彩视频,无论是浏览者还是设计者,都能通俗易懂地,了解字体的规范给观看者带来的感觉。

第 1475 天结语

不知不觉,又写了一篇三千多字的文章。最近一直忙于 THYUU/星度 主题的进一步优化和升级,有些东西一旦做成了标准就不能随心所欲。正所谓给他人立下规矩,同样也是规矩了自己。朋友建议我写一些能够给大家带来折腾的东西,他的建议让我再次思考。这一点其他博主就做的很好,杜老师 分享的服务器各项指南,令我望尘莫及,张洪 HEO 分享的各项科技前瞻,令我赞不绝口。Jdeal 分享的生活奇趣小事物,令我耳目一新。莫比乌斯 十分艺术性的语言文字,更是仰慕已久。还有众多友联里优秀的博主没有列举,过段时间加上一些推荐栏目。综上所述,这或是风记星辰进入不了某些博客组织推荐的原因,的确还需自我反省与总结。今天的总结有些冗余,过于矫情。下面开始真正的结语。

写博客就像是种下一颗种子,期待它生根发芽。就像是养一条鱼,期待它赏心悦目。就像是养一只猫,期待它伴随身旁。然而,待到经年已此去,终是自我感动矣。备案关站的那段时间,有众多朋友在微信或邮件咨询为什么不能访问,也是令我十分感动。

扩展阅读

Red Hat(红帽)公司

Red Hat(红帽)公司(NYSE:RHT)是一家开源解决方案供应商,也是标准普尔 500 指数成员。总部位于美国北卡罗来纳州的罗利市,截止 2022 年 6 月,红帽共有 100 多个分公司全球雇员超过 20,000 人。红帽公司为诸多重要 IT 技术如操作系统、存储、中间件、虚拟化和云计算提供关键任务的软件与服务。红帽的开放源码模式提供跨物理、虚拟和云端环境的企业运算解决方案,以帮助企业降低成本并提升效能、稳定性与安全性。红帽公司同时也为全球客户或通过领先合作伙伴为客户提供技术支持、培训和咨询服务。

洛杉矶设计工作室 MCKL

Jeremy Mickel 属于洛杉矶设计工作室 MCKL 中的字体设计师,该工作室 2018 年,曾为运动品牌 Adidas 设计了一套可变字体 Adineue Chop。Adineue CHOP 是一种以八角形为设计形态,由多种宽度和重量构建而成的无衬线动态字体,它的可变范围无限广,从 CrazyLight 到 UltraBlack,从 XXNarrow 到 XXWide 都可以实现。