如何正确地对不同显示器、浏览器设定字体渲染参数？

[F9y4ng]

字体渲染参数的设置

不同的显示器设置、不同的浏览器对不同的字体，不同的CSS样式的解析和显示效果是不会相同的，甚至会有很大的差异。所以，如何在本地计算机上调试出适合自己使用的渲染参数才是重点。在“字体渲染（自用脚本）”中，设定了七项字体渲染相关的参数（字体设定、字体重写、平滑、缩放、描边、阴影、阴影颜色），下面将对具体设置做下说明：

综述

在不同内核的浏览器中，渲染参数必然不同。即使是相同内核的Chrome与Edge的渲染参数也是不同的，所以同一台计算机上不同浏览器间的渲染参数也并不通用。要想达到比较理想的渲染效果，仅靠调整一项参数是很难实现的，每一项渲染参数的设定都在特定的条件下起着决定性的作用。只有通过将各项字体渲染参数慢慢调整到合适的搭配时，才能达到个人满意的渲染效果。（基本劝退懒汉用户，没有神奇小饼干）

保存渲染数据时，全局数据保存是所有网站默认使用的渲染参数。但，如果单独保存了站点数据，那么在访问该站点时，会优先调用该站点的渲染数据。值得注意的是：

• 郑重声明：某些非官方修改版的Blink内核浏览器，关闭 DirectWrite 功能，会造成大部分字体无法被程序识别，或出现非ASCII字符与Emoji图标无法被正确渲染的问题（如 [发现错误] 文字变为方块 #283 ）。重要提示：后续所有脚本更新不再对应用 disabled DirectWrite 的浏览器做代码兼容和问题解答，要使用该项目内的脚本，建议您使用主流浏览器。

• 使用Firefox浏览器时，如果您开启了隐私浏览功能，将会导致程序无法正确识别系统中安装的第三方字体。

  • 修改 about:config 中 privacy.fingerprintingProtection 为 false 来关闭浏览器指纹保护功能。

  • 修改 about:config 中 privacy.fingerprintingProtection.pbmode 为 false 来关闭浏览器指纹保护模式。

  • librewolf浏览器，默认设置会阻止脚本识别系统安装的第三方字体。可通过 about:config 的设置来改善以上问题：

    privacy.fingerprintingProtection | false
    privacy.fingerprintingProtection.pbmode | false
    privacy.resistFingerprinting | false
    privacy.resistFingerprinting.autoDeclineNoUserInputCanvasPrompts | false
    

    注意：由于 librewolf 的固定设置原因，每次重启都需要重新设置 privacy.fingerprintingProtection | false

• 使用Brave浏览器开启“Brave Shields”在某些站点上会因其某些屏蔽功能造成脚本失效（如 在 Brave 上字体渲染效果随机失效 #109），处理办法如下：

  1. 全局关闭
     打开浏览器设置-->屏蔽-->阻止指纹识别-->选择 已停用。
  2. 手动关闭
     在脚本失效的网站，点击“Brave Shields”图标，打开 高级控制 菜单，将阻止指纹识别 改为 允许指纹识别。

• 使用Edge浏览器时，如果您的显示器为低分辨率（≤1080P），建议在edge://flags/#edge-enhance-text-contrast中关闭clearType渲染模式，直接使用脚本渲染会得到更好的效果。（因为Edge默认开启的enhance-text-contrast在低分辨率下会造成粗体字重太粗，而默认字重不清晰的问题）

• 一些站点使用了iframe框架页面（不同域的情况），这时候保存为站点数据时，需要将iframe框架的域名也进行单独设置才能实现站点独享数据的效果（如 钉钉文档下方内容未渲染 #137 遇到的情况）。

• 如果只想在一小部分站点应用字体渲染，其他默认不开启（如 [新增功能] 能否增设“只在指定某些域名生效，其他所有域名均不渲染”的功能 #121 遇到的情况），可在 高级核心功能设置 中， 滚动到最下方找到 “仅在特定域名生效（全局禁用）” 的位置，点击快捷开关，即可实现默认关闭渲染，仅在指定网站保存该网站独享的渲染数据的功能。

• 在个别站点遇到字体渲染的样式问题时，如文字变乱码、变方块等情况，可访问 网站样式错误修正的设置分享，不定期更新，自取自用。 #42 来查询已知的处理方法来解决，如果未找到结果可至 Discussions 来提问获取答案。

字体设定

字体的设定，主观性很大，有人喜欢默认的微软雅黑，有人喜欢苹方，有人喜欢屏显臻宋，萝卜青菜各有所爱，挑一个你喜欢的字体使用就可以了。但是，在低分辨率显示器下（1080P及以下），不同的浏览器对一些字体的默认渲染有较大的差异，会出现有些字体很清晰，有些字体很模糊的问题，在这种情况下，更换默认字体是必要的。

• 如何解决英文字体、与中文字体的混合设置，参阅 分享：为英文和中文字体分别设置不同的字体 #83

字体重写

字体的重写功能一般用来替换页面上大部分常用的、但被赋予高优先级的网页字体。一般情况下，建议开启字体重写，以实现页面上所有的字体统一化。个别站点的字体通过行内样式完全写死（如: #313 ）的情况可通过自定义字体重写数据功能来实现。可参阅 #267 字体重写自定义数据

需要注意的是：字体重写功能如果关闭，那么上面的字体设定功能也将被自动禁用。

• 字体重写功能实现了网页上的字体热替换。要实现全局字体的热替换，在添加自定义字体时，必须添加字体的 Postscript Name 的 ps 值，如{"ch":"OPlusSans 3.0","en":"OPlusSans 3.0","ps":"OPlusSans3.0"}
• 如何查询字体的Postscript Name？ 请查阅 如何优雅正确地下载及使用更多中文及英文字体？ #64

字体平滑

字体平滑功能在日常的使用中如没有其他异常，建议默认开启。在特定的操作系统和浏览器下，该选项赋予了不同的渲染设定。

字体缩放

字体缩放是一项实验性功能，目前在Firefox（Gecko内核<126）下兼容性比较差，不推荐开启。 字体缩放是脚本级别的缩放设定，在WebKit、BLINK及GECKO126+内核下与浏览器缩放有较为相似的效果。但由于脚本沙盒的限制、页面显示空间的制约，以及对部分使用视窗单位的站点兼容问题，需酌情使用。

• Firefox（GECKO>=126）下使用Greasemonkey扩展时不推荐开启字体缩放功能，因其加载延迟会造成坐标修复的失败。

• 字体缩放功能附加了视口单位修正的选项，用来修正视口单位在缩放后长度不准确的问题。在个别站点由于CSP或CORS的问题，会造成样式错误，在此类站点可通过取消勾选视口修正保存为站点数据来解决；或通过安装扩展 Moesif Origin & CORS Changer 和 Disable-CSP 来全局给与执行权限。(Firefox下扩展名相同)

  • 在部分站点中某些特殊坐标与尺寸的修复，可参照 #267 站点缩放修正设置数据 来完成。

• 字体比例缩放搭配字体描边、字体阴影的设置会达到非常好的渲染效果。

• 众所周知，在Windows下不论高分屏低分屏，将系统缩放提升至150%以上，可使得字体渲染达到肉眼可见的质的飞跃。

• 脚本级缩放与系统缩放和浏览器缩放是可效果叠加的，换句话说就是可放的更大，缩的更小。

字体描边

字体描边可以粗浅的理解为字体的粗细（字重）设置。某些字体的Regular字重相对较细，可通过对字体描边来加重字体，让单薄的字体变得更浑厚。但由于个别字体对描边在特定内核的浏览器下有渲染bug，使用字体描边时需要特别注意：

• 微软雅黑、XHei字体家族等字体在Chromium(BLINK)内核浏览器下，使用描边效果会造成字体渲染错误，从而造成描边偏移的问题。（低分辨率下使用上述字体，尽量不要使用字体描边功能。）
• Chromium(BLINK)v96.0以上版本内核浏览器，在字体粗体时使用描边效果，会造成粗体字体非常粗重模糊不清的问题。（已有修正功能选项，但在古董电脑上会有较高的CPU瞬时占用【已优化解决】）
• 配置较低的计算机，或在个别编辑类站点，如果出现页面卡死或无响应的情况，请尝试在该站点其他页面内将字体描边的粗体修正功能关闭。（仅BLINK内核浏览器）

字体阴影

字体阴影的设定是将字体通过阴影渲染得更清晰可见。适当的阴影尺寸可提高字体可见性，但过高的阴影尺寸反而会造成字体模糊，一种类似于高度近视感的模糊😓。单一对字体阴影尺寸的设定，并不能实现较为理想的效果，因为字体阴影与字体描边有一定的叠加作用，需要结合两者进行合适的调整。

• New! 在Safari浏览器中，使用某些系统字体时，同时开启字体描边和字体阴影会造成渲染错误。此时，请二者选其一开启进行字体渲染。

字体阴影颜色

字体阴影颜色在新版本脚本中设置了重要渲染参数（阴影颜色的alpha通道），来设定阴影颜色的透明度。原始通过字体阴影渲染字体时出现的字体边缘模糊不清，或小号字体渲染得一坨黑的情况，可通过增加阴影颜色的透明度来解决。结合上面设置的字体描边、字体阴影尺寸，再通过字体阴影颜色及透明度来进行微调，可使字体渲染效果达到较为理想的效果。（当然，效果的好坏还是以个人的审美决定的。）

关于字体渲染的一些说明

字体渲染

这应该是一个老生常谈的话题，从最早的XP系统开始就一直被津津乐道。当然，渲染效果是十分主观的判断，因为大部分人都有自己独特的审美观点，虽然也有很多从众者。所以对于字体渲染工具而言，并不是一个能够满足所有大众口味的万能药，甚至可以说是十分小众，极端点说是强迫症的最佳业余爱好😂。 所以，不强求所有人喜欢，也没有必要一味的否定，毕竟没有最好，只有最合适。

字体渲染脚本

既然是浏览器脚本，首当其冲的就是跨平台优势，只要浏览器支持Javascript，那么几乎所有平台的主流浏览器都支持。但由于脚本运行在沙盒环境中，脚本的权限被大大的限制和削弱，使得浏览器脚本与扩展、插件、系统环境相比，功能上会弱很多，一些高级或需要高权限的功能将无法被调用。脚本层面的字体渲染，大都是通过CSS样式来进行二次渲染，这将不可避免的会造成页面的重绘和重排。因此，除了使用脚本高效快速的通过CSS样式输出最佳的渲染效果外，更多是降低页面的重绘和回流，从而减少对CPU和内存的占用。

[F9y4ng]

渲染示例

Windows 10 （1920*1080） Chrome 150%字体缩放动画，效果仅供参考：

图片小大8.97MB，耐心等待图片加载，或点这里看大图。

点击查看图片: Chrome

Windows 10 （1920*1080） Firefox 150%字体缩放动画，效果仅供参考：

图片小大9.32MB，耐心等待图片加载，或点这里看大图。

点击查看图片: Firefox