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

本贴最后更新于 284 天前,其中的信息可能已经时移世易

众所周知 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)

  • 思源笔记

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

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

    26202 引用 • 108872 回帖 • 3 关注
  • 代码片段

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

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

    196 引用 • 1394 回帖
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 2 赞同

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

    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 评论 via Android

    先谢谢大佬的代码片段,不知道大佬碰到过这个问题吗?多级有序列表显示异常,自带主题没这个问题,感觉是 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 赞同

    搞定了 谢谢老哥

  • QQQorange 1 评论

    电脑和手机想要同时生效得搞两个代码片段,像这样image.png

    第一个是这个:

    :not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]) { /*使字体渲染不会应用于部分特殊字符符号和图标以及按钮等网页元素*/ text-shadow: 0.01em 0.01em 0.01em #999999 ; /*更改字体阴影及颜色,可修改数值实现不同的效果*/ -webkit-text-stroke-width: 0.35px; /*更改字体描边粗细*/ -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; }

    第二段是这个:

    @font-face { font-family: "1"; font-style: normal; src: url("plugins/fonts/方正盛世楷书简体.ttf"); } :root { --b3-font-family: "1", "LXGW WenKai Screen R", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important; --b3-font-family-code: "1", "LXGW WenKai Screen R", "JetBrainsMono-Regular", "mononoki", "Consolas", "Liberation Mono", "Menlo", "Courier", "monospace", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important; --b3-font-family-graph: "1", "LXGW WenKai Screen R", "mononoki" !important; --b3-font-family-math: "1", "LXGW WenKai Screen R", "KaTeX_Math", "KaTeX_Main" !important; }
    可以的,我用自定义字体插件其实包含了这部分代码,所以没考虑到不使用这插件的
    5kyfkr
  • QingMing1

    **非常感谢,很有用 👍 **

请输入回帖内容 ...

推荐标签 标签

  • 强迫症

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

    15 引用 • 161 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 3 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 608 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Excel
    31 引用 • 28 回帖 • 2 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 351 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 28 回帖 • 2 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 232 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 655 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    134 引用 • 1127 回帖 • 110 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 8 关注
  • V2EX

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

    16 引用 • 236 回帖 • 243 关注
  • abitmean

    有点意思就行了

    36 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1021 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 755 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    291 引用 • 4495 回帖 • 662 关注
  • Scala

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

    13 引用 • 11 回帖 • 155 关注
  • CodeMirror
    2 引用 • 17 回帖 • 173 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    172 引用 • 1538 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 4 关注