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

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

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

  • 思源笔记

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

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

    25789 引用 • 106759 回帖
  • 代码片段

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

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

    175 引用 • 1230 回帖 • 4 关注
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 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • QQQorange 1 赞同

    搞定了 谢谢老哥

  • 老哥有办法使用本地字体吗?这样在移动端自定义字体也能生效了

    1 回复
  • 5kyfkr

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

    image.png

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 3 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 4 关注
  • 叶归
    9 引用 • 43 回帖 • 20 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 169 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 552 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 63 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1281 回帖 • 1 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    113 引用 • 315 回帖
  • Tomcat

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

    162 引用 • 529 回帖 • 1 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 1 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 3 关注
  • Vditor

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

    371 引用 • 1855 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 111 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Log4j

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

    20 引用 • 18 回帖 • 34 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 248 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖 • 1 关注
  • 职场

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

    127 引用 • 1708 回帖
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 611 关注