[css] 思源笔记字体渲染增强 - 代码片段

众所周知 windows 的字体渲染很差劲，一般会给电脑装上 mactype 进行字体渲染优化，但是在 chrome 内核的浏览器中均无法应用(electron 也相当于 chrome 内核)，所以只能自己增加 css 通过修改字体阴影和描边样式实现字体加粗渲染优化。

使用说明

下方是 CSS 片段，需修改字体设置内的字体名称，将黑体修改为对应字体，这样会全局替换思源所有字体，如果需要精细调整字体可以使用 自定义字体 插件修改，并将本 css 内的字体设置行删除即可。

因为部分文本加粗后的字体可能会过于粗导致笔画粘连，所以最后一段代码排除了加粗后的文本，如果需要渲染加粗字体可把最后一段删除。

在思源笔记【设置-外观-代码片段】添加如下代码片段即可

:not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]){
 /*使字体渲染不会应用于部分特殊字符符号和图标以及按钮等网页元素*/

    font-family: "黑体" !important; /*字体设置,中文字体安装对应字体后可选：苹方黑体、微软雅黑、pingfang sc regular、PingFang SC Heavy、.萍方-简、思源黑体 CN*/

    text-shadow: 0.01em 0.01em 0.01em #999999 ;  /*更改字体阴影及颜色,可修改数值实现不同的效果*/
    -webkit-text-stroke-width: 0.50px; /*更改字体描边粗细*/
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

 /*使字体渲染不会应用于公式和图片制卡*/
span:not([class="katex"]) :not([class="overlaydiv"]){
    text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important;  
}

/*使字体渲染不会应用于PDF浏览*/
.textLayer span
{
    text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important;  
}

/* 使字体渲染不会应用于有序列表序号 */
.protyle-action.protyle-action--order {
    text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important;  
}

 /*使字体渲染不会应用于加粗字体*/
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {
    text-shadow: 0.01em 0.01em 0.01em #999999 !important;  
    -webkit-text-stroke-width: 0px !important;
}

​

开启前后对比效果

另外本 css 在手机端也可正常应用，详细多端字体同步可参考此文思源笔记手机端和电脑端使用同一字体 - 链滴 (ld246.com)