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

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

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

  • 思源笔记

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

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

    26774 引用 • 111597 回帖
  • 代码片段

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

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

    227 引用 • 1638 回帖
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

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

请输入回帖内容 ...

推荐标签 标签

  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    498 引用 • 934 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 597 回帖 • 2 关注
  • 架构

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

    142 引用 • 442 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 109 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 635 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 1 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 775 关注
  • 叶归
    15 引用 • 66 回帖 • 27 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    957 引用 • 944 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 2 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 279 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 4 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • WiFiDog

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

    1 引用 • 7 回帖 • 613 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 742 关注
  • 支付宝

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

    29 引用 • 347 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    379 引用 • 1868 回帖 • 2 关注
  • Tomcat

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

    162 引用 • 529 回帖 • 9 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • ngrok

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

    7 引用 • 63 回帖 • 660 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 4 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 41 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 184 关注
  • 自由行
    1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    84 引用 • 414 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 413 关注