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

[F9y4ng]

字体渲染参数的设置

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

综述

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

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

Caution

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

• 首次使用本脚本，如果您的浏览器默认开启浏览器指纹保护功能或使用隐私模式访问站点时，可能会出现以下提示：

  中文： English:

Important

此时，您需要关闭浏览器指纹保护功能或退出隐私模式后，点击红色提示框 或 进入 高级核心功能设置 重建字体缓存。

• 首次使用本脚本，如果您的操作系统没有安装过字体表内第三方字体时，则会出现以下提示：

  中文： English:

Important

此时，你可以点击红色提示框，进入字体下载页面下载更多字体表中预定义的字体。

• 使用 Firefox 浏览器时：

  • 如果您正在使用 v145.0+ 以上版本时，请注意在设置中的 字体 --> 高级...，勾选 "允许页面选择自己的字体代替您的上述选择(A)"。（如图所示）

    

  • 如果您开启了隐私浏览功能，将会导致程序无法正确识别系统中安装的第三方字体，通过修改 about:config 中以下配置启用：

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

  • 如果打开了浏览器指纹保护功能，通过修改 about:config 中以下配置来关闭浏览器指纹保护功能：

  privacy.fingerprintingProtection | false 
  privacy.resistFingerprinting | false

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

  privacy.fingerprintingProtection | false
  privacy.fingerprintingProtection.pbmode | false
  privacy.resistFingerprinting | false
  privacy.resistFingerprinting.pbmode | false
  privacy.resistFingerprinting.randomization.canvas.use_siphash | false
  privacy.resistFingerprinting.autoDeclineNoUserInputCanvasPrompts | false

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

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

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

• 使用 Vivaldi 浏览器， 需打开设置，点击标签页选项卡，在标签选项中，取消勾选“显示弹出缩略图”，以解决该功能与字体渲染脚本冲突的问题。(或升级至7.3.3635.9以上版本)

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

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

• 在个别站点遇到字体渲染的样式问题时，如文字变乱码、变方块等情况，请先按 [新功能介绍] 拉取预定义的站点渲染规则 #446 的方法来拉取远程规则。如依然存在问题，可访问 网站样式错误修正的设置分享，不定期更新，自取自用。 #42 来查询已知的处理方法来解决，若未找到结果可至 Discussions 来提问获取答案。

字体设定

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

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

字体重写

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

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

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

字体平滑

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

字体缩放

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

• 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