登录 注册

修改无序列表圆点大小 / 有序列表数字大小 & 字体

自己那 savor 的 css 折腾了一下，发现聚焦和闪卡状态下会失效，求大佬帮忙 🙏

样式大小参照 FlowUs

  • 思源笔记

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

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

    23104 引用 • 93006 回帖
  • Q&A

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

    8497 引用 • 38708 回帖 • 153 关注
13 回帖
6
6
239 86 147 1 5

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    css 片段增加下面的代码即可。

    然后你说的字体如果修改整体字体可以到 设置 》编辑器 》字体中修改即可，如果仅修改 li 的字体，请参考下面的代码和说明。

    /* 定义li前缀大小 */
:root {
    /* 无序列表圆点大小 / 有序列表数字大小, 这里的根据你的需求调整 */
    --my-li-icon-size: 24px;
    /* 我的自定义字体，，根据需要改成你自己本地的字体 */
    --my-font-family: "流畅书写体"
}
/* li文字大小 */
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action, .protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action, .protyle .protyle-wysiwyg[data-readonly="false"] .li[data-subtype="t"] > .protyle-action{
    font-size: var(--my-li-icon-size);
    /* 如果仅修改li前缀的字体改这里，但无序列表的圆点不生效 */
    /*font-family: var(--my-font-family), var(--b3-font-family-protyle);*/
}
/* 如果仅单独调整有序列文字大小改这里
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
    font-size: var(--my-li-icon-size);
}
*/
/* li前缀图标大小 */
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {
    height: var(--my-li-icon-size);
    width: var(--my-li-icon-size);
}
/* 修改li元素字体 */
.protyle-wysiwyg [data-node-id].li{
    font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
/* 如果仅更改li文本内容的字体改这里
.protyle-wysiwyg [data-node-id].li [data-type=NodeParagraph]{
    font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
*/

    效果

    111.png

    2222.png

    注意：

    --my-font-family: "流畅书写体" 这里的字体名要改成你本地的字体名。

    本地字体只需要安装字体到系统中即可。

    如果不生效，重启下思源即可。

    不过字体和系统相关，不同操作系统或手机上也得安装相应的字体才行，否则会回落到默认字体。

    那么怎么查看本地的字体有哪些？叫什么名呢？

    打开思源设置对话框，然后打开控制台（windows/linux:Ctrl + Shift + I, macos:Cmd + Opt + I），切换到 console 选项卡，然后输入以下代码查看

    Array.from(document.querySelector("#fontFamily")).map(option=>option.value)

    image.png

13 回帖
修改无序列表圆点大小 / 有序列表数字大小 & 字体

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JOYCELEEEEE •
    订阅者 作者

    感谢大佬详解！试了一下，有序列表完美解决，无序列表的圆点貌似无法调整。

    1 回复
  • 其他回帖
  • wilsons •
    付费者 捐赠者

    我这边没问题，应该是你主题问题，你用的什么主题？

    方便的话，可以把相关文档去敏后导出

    并且附上你的代码看看

    1 回复
  • wilsons • • 1
    付费者 捐赠者

    应该和大小无关，如图

    image.png

    image.png

    建议，新建空间测试，如果还有问题，那就没招了。

  • wilsons • • 1
    付费者 捐赠者

    css 片段增加下面的代码即可。

    然后你说的字体如果修改整体字体可以到 设置 》编辑器 》字体中修改即可，如果仅修改 li 的字体，请参考下面的代码和说明。

    /* 定义li前缀大小 */
:root {
    /* 无序列表圆点大小 / 有序列表数字大小, 这里的根据你的需求调整 */
    --my-li-icon-size: 24px;
    /* 我的自定义字体，，根据需要改成你自己本地的字体 */
    --my-font-family: "流畅书写体"
}
/* li文字大小 */
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action, .protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action, .protyle .protyle-wysiwyg[data-readonly="false"] .li[data-subtype="t"] > .protyle-action{
    font-size: var(--my-li-icon-size);
    /* 如果仅修改li前缀的字体改这里，但无序列表的圆点不生效 */
    /*font-family: var(--my-font-family), var(--b3-font-family-protyle);*/
}
/* 如果仅单独调整有序列文字大小改这里
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
    font-size: var(--my-li-icon-size);
}
*/
/* li前缀图标大小 */
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {
    height: var(--my-li-icon-size);
    width: var(--my-li-icon-size);
}
/* 修改li元素字体 */
.protyle-wysiwyg [data-node-id].li{
    font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
/* 如果仅更改li文本内容的字体改这里
.protyle-wysiwyg [data-node-id].li [data-type=NodeParagraph]{
    font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
*/

    效果

    111.png

    2222.png

    注意：

    --my-font-family: "流畅书写体" 这里的字体名要改成你本地的字体名。

    本地字体只需要安装字体到系统中即可。

    如果不生效，重启下思源即可。

    不过字体和系统相关，不同操作系统或手机上也得安装相应的字体才行，否则会回落到默认字体。

    那么怎么查看本地的字体有哪些？叫什么名呢？

    打开思源设置对话框，然后打开控制台（windows/linux:Ctrl + Shift + I, macos:Cmd + Opt + I），切换到 console 选项卡，然后输入以下代码查看

    Array.from(document.querySelector("#fontFamily")).map(option=>option.value)

    image.png

    1 回复
    2 操作
    wilsons 在 2024-08-04 10:17:08 更新了该回帖
    wilsons 在 2024-08-04 08:55:14 更新了该回帖
  • 查看全部回帖
JOYCELEEEEE
输入是为输出。
回帖
146
 帖子
45
 积分
2043

近期热议

推荐标签 标签

  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • FlowUs

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

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

    1 引用 • 1 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • Kafka

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

    36 引用 • 35 回帖 • 3 关注
  • 安全

    安全永远都不是一个小问题。

    200 引用 • 816 回帖 • 1 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    410 引用 • 1246 回帖 • 587 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • Q&A

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

    8496 引用 • 38707 回帖 • 153 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 899 回帖 • 1 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 72 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 4 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖 • 1 关注
  • Markdown

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

    167 引用 • 1520 回帖
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 3 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 162 关注
  • SpaceVim

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

    3 引用 • 31 回帖 • 104 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 321 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 685 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 代码片段

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

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

    91 引用 • 585 回帖
  • 周末

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

    14 引用 • 297 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 42 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 410 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 734 回帖

最新标签