[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;
}

开启前后对比效果

image.png

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

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22327 引用 • 89345 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖 • 1 关注
4 操作
5kyfkr 在 2024-09-23 21:56:33 更新了该帖
JeffreyChen 在 2024-09-21 19:00:33 更新了该帖
5kyfkr 在 2024-09-17 00:39:26 更新了该帖
5kyfkr 在 2024-04-12 14:22:51 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 感谢,我之前一直是使用这个来进行字体渲染的:greasyfork 字体渲染

    思源原来还可以改 CSS,我也是刚发现。正准备把这渲染搬过来,你就来了!

    1 回复
  • 5kyfkr

    是滴,和浏览器里这些脚本其实原理一样的,就是改描边和阴影,我以前是用很粗的字体解决渲染问题,发现还是改 css 效果适配字体范围更广点

  • Xiavi93 1 赞同

    感谢分享,解决了一个不大不小的痛点吧,让我摆脱了 Misans VF

  • Spade7 1 赞同

    感谢分享,感觉有点粗,自己改了一版

    image.png

    :not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]){
     /*使字体渲染不会应用于部分特殊字符符号和图标以及按钮等网页元素*/
    
        font-family: "仓耳云黑 W04" !important; /*字体设置,中文字体安装对应字体后可选:苹方黑体、微软雅黑、pingfang sc regular、PingFang SC Heavy、.萍方-简、思源黑体 CN*/
    
        text-shadow: 0 0 0.36px #7C7C7CDD ;  /*更改字体阴影及颜色,可修改数值实现不同的效果*/
        -webkit-text-stroke-width: 0.08px; /*更改字体描边粗细*/
        -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;  
    }
    
     /*使字体渲染不会应用于加粗字体*/
    .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;
    }
    
  • 善 🙏

  • Adaxi 1 赞同

    好用!特别是用惯了 2k 屏幕后又羡慕 4K 那种细腻。

  • Afterglow 1 评论

    先谢谢大佬的代码片段,不知道大佬碰到过这个问题吗?多级有序列表显示异常,自带主题没这个问题,感觉是 savor 主题有序列表样式造成的?

    mmexport1727089347990.jpg

    已经改好了,加上这段就行,或者重新复制贴子里更新的代码。/* 使字体渲染不会应用于有序列表序号 */ .protyle-action.protyle-action--order { text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important; }
    5kyfkr 1
  • 老哥有办法使用本地字体吗?这样在移动端自定义字体也能生效了

    1 回复
  • 5kyfkr

    思源笔记手机端和电脑端使用同一字体 - 链滴 (ld246.com)参考这个帖子,把字体放到思源工作空间里,并在自定义字体插件里面把 css 设置里照着这个帖子的代码填好自己字体的位置和名称。

    image.png

    最后编辑器设置里选默认字体就可以用自定义字体插件控制字体了,手机上也能同步应用,或者直接不用这个插件,用贴子里的 css 也行,就只能控制全局字体。另外要删除字体增强 css 里面开头的字体设置行不然就重复配置字体了。

    1 回复
  • QQQorange 1 赞同

    搞定了 谢谢老哥

请输入回帖内容 ...

推荐标签 标签

  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 129 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 786 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 27 关注
  • V2Ray
    1 引用 • 15 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    47 引用 • 25 回帖 • 2 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 586 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 325 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 614 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 261 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 624 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8106 引用 • 36988 回帖 • 160 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖 • 1 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注