「firefox 字体渲染 & 多图测试」

firefox 字体渲染 & 多图测试

2021/09/01 字数统计： 2.7k 阅读时间： 5 mins 访问次数： ... 评论统计： ...

　　因为注册不了谷歌账号一怒之下换了 firefox，捣鼓了几天惊觉 blog 的字体在 firefox 里充满狗牙，但是切回 chrome 就非常平滑。

检索：firefox chrome 字体渲染
返回：85% firefox 的字体渲染效果比 chrome 强多了
　　　14% 觉得 chrome 字体渲染效果更好是你眼睛有问题吧
　　　1% firefox 的字体渲染比 chrome 多了好多锯齿啊
推测：简中男性互联网用户中存在审美云同步行为，且目前通用的数据包存在一定问题

Firefox 字体渲染

　　啊，用辅助机的语气说话实在是太阴阳怪气了，suki【不是
　　先上对比图：
img-center

　　环境：win10 + 1080p 显示器，字体 Noto Sans CJK SC，大小 16px，字重 600
　　对比可发现两个浏览器渲染的字体轮廓形状一致，但 firefox 的轮廓浓度比 chrome 深，笔画密集处有很明显的黏连，因此平滑度和可读性都远不如 chrome。

解决方式

　　~~在放弃使用中文搜索后我很快得到了答案~~，windows 系统下 firefox 字体渲染出现锯齿的原因是它内置了类似 mactype 的独立字体渲染引擎，并且默认的数值并不理想。
　　使用 firefox 浏览器访问 about:config 就可以进入高级设置页面，在搜索框里输入 cleartype，找到如下参数并修改：

gfx.font_rendering.cleartype_params.cleartype_level || 100
// cleartype 渲染强度
gfx.font_rendering.cleartype_params.enhanced_contrast || 0
// 字体对比度，这一条算是罪魁祸首
gfx.font_rendering.cleartype_params.rendering_mode || 5
// 使用灰阶模式处理字体轮廓（可选）

　　修改完毕后记得点击旁边的 ✓ 按钮保存，重启浏览器后就可以看到效果了。
　　参考资料：https://neos21.net/blog/2018/02/13-01.html

　　解决了这个问题后在毛象和西风就 firefox 的字体渲染问题进行了一点讨论，发现 firefox 的默认设置在高分屏下观感确实更好 ~~以及 windows 你是真的不行~~，但，1080p 的显示器就不配活了吗！
　　说起来 N 卡的显卡驱动也是……重装系统后显卡驱动自动更新到高版本，帧数虽然流畅了不少，但游戏内的锯齿明显变多了，外加我 gshade 的滤镜里有大数值的锐化，整个游戏画面直接变成像素图。确实减少渲染平滑度在高分屏上的观感更清晰响应速度也更好，但是 1080p 显示器的市场占有率也没有那么不堪吧，起码 144 之类高刷新率显示器里 1080p 分辨率还是占不小比重的，你就这么无视我们的用户体验？

　　啊顺便再吐槽一下 firefox 的 css 动画渲染效果也很感人，我给图片设置了悬停显示阴影然后这个动画抖个不停……算了算了.jpg

亿些吐槽

警告：前方有大量不友善言论出没，请注意避让

　　最近不仅在自己搭 hexo，也和塔塔一起研究了很多关于 hugo 的问题。实话实说我也没接受过任何系统的前端教育，所有建站知识都是我一点一点谷歌出来的，虽然戏称自己是谷歌大学优秀在读生，但是在自学的过程中还是发现了很多让人烦躁的地方……
　　那就是，一个东西的中文用户数量和它的自学难度大体成反比。
　　因为简中 IT 爱好者~~（男）~~实在是太 tm 爱洗别人的稿了。这一周以来我大概浏览了不下二十篇「建站教程」，其中 90% 的内容都大同小异并且完全不符合现代汉语规范，甚至有一篇直接把 hugo 官方提供的自动部署脚本原文复制粘贴到了自己的博客里，还不标原始链接。
　　请问这种「教程」真的有存在的必要吗？拿十八手洗稿教程洗成第十九手再发到自己的 blog 是能获得什么特别的成就感吗？
　　大概个人网站建站方面的内容也有一些样本偏差的因素……啊我知道你们当中可能有很大一部分的人是信息技术相关专业在读大学生，搭博客的动机就是为了有东西能往毕设和简历里塞，注水也不是不能理解。可是这些东西也太水了，朋友，卫生巾要是像你的建站教程一样能吸水，姑娘们都能在生理期游泳了。然后你还给这堆含水量 99% 的东西做了精细的搜索引擎优化，导致谷歌中文搜索结果前几页简直是汪洋大海，这和把卫生巾贴在食堂门口有区别吗，是不是太不道德了？

多图模式与样式测试

更改了 JS 脚本，将 markdown 标签内的图片描述渲染成了链接 id
- 然后用 css 为不同的 id 各自指定样式
  在 markdown 标签内写入不同的图片描述就可以渲染不同样式的图片了
代价是不能在图片底下显示描述了，但是目前没有找到更加便捷的实现方式，而且效果感觉还不错，这一点小牺牲还是可以接受的

img-left

　　大无语事件：我突然发现 markdown 的这个图片标签是行内类渲染的，如果在源码里换行就会产生多余的换行符，但是这玩意不换行也太不符合人类的书写习惯了吧……
　　哦忘了我只是个球。也不符合球的书写习惯啊！我行首还要手动缩进两个全角空格啊！在图片标签后面打两个空格好难看啊！

　　……草，多打了一个回车问题就解决了，我本来都想好用 JS 替换掉多余的 <br> 了……

　　依然存在的问题：由于图片是使用 float 属性实现左右对齐 + 文字环绕的，如果图片后没有足够多的文字内容做填充就会滑出整个 post-block 框，目前在归档和分类页面可以非常明显地观察到这一问题。
　　以及图片宽度不足时两侧的图片会在 y 轴上交叉，并在中间产生非常狭窄的文字区域，我不太能接受这种框架不规则且比例不固定的排版……

img-right

　　先讨论前一个问题。我设想过用 css 的 last-child 选择器在每个页面最后一个图片底下加一些 margin，但是这个主题的所有图片都是通过同一个 JS 脚本导入的（layout 里有一个 gallery.ejs 但实测并没有用到），因此他们也有着完全一样的 html 构成……我觉得 css 解决不了这种结构层面的问题。
　　奇怪的是我首页的卡片 layout 里输出的图片似乎是独立格式的（我记得我明明直接复制的分类页那个文章列表改的），让我研究一下我干了什么……
　　哦看了一下是我在 layout 里改了 div class，行了解决了。只要不是 post-entry class 下的图片就不会被 JS 脚本处理，整挺好.mp3

解决

　　说起来这个 h4……周围如果高亮元素太多它看起来好像就不太像标题了的样子…… ~~花里胡哨~~
　　查阅资料得知添加 clear:both 样式可以排除 float 的影响，于是在 article.ejs 的正文导入模块后添加了一行：　　

1	<div class="clear" style="clear:both;">

　　另外给所有的标题和代码引用框也添加了 clear 样式，完美解决~
　　class 名应该可以省略，不过既然它已经没有内容了，还是给它一个名字比较好【奇怪的人性化处理增加了.jpg

今日工作总结

分类页面施工完毕 ✓
完成了多图页面排版 ✓
添加了 RSS ✓
修正了 firefox 下的一些渲染问题
- 字体渲染异常
- 部分页面的 break-inside 属性失效
  - 为子元素添加 overflow:auto 样式可以避免被截断
- firefox 你到底行不行啊你这傻狐狸
更新了网页标题，现在每个页面的标题都会加上网站名后缀了
添加了网页图标（暂定版）
修改了标签 layout 文件中的标题层级（我觉得这个是原作者写错了）

　　最后吐槽一下自己，我为什么会觉得一个从 0 开始写主题的个站会被我用来存稿呢……这不全都是前端笔记吗？？

無色人間。