登录 注册

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

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

样式大小参照 FlowUs

  • 思源笔记

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

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

    23001 引用 • 92504 回帖 • 2 关注
  • Q&A

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

    8442 引用 • 38441 回帖 • 154 关注
13 回帖
6
6
235 86 145 1 3

相关帖子

被采纳的回答
  • 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 回帖
修改无序列表圆点大小 / 有序列表数字大小 & 字体

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 更新了该回帖
  • 其他回帖
  • wilsons • • 1
    付费者 捐赠者

    应该和大小无关，如图

    image.png

    image.png

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

  • wilsons •
    付费者 捐赠者

    楼上说的有道理，可以在新空间测试下，是哪里冲突，或尝试加 !important 看看能否解决。

  • wilsons •
    付费者 捐赠者

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

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

    并且附上你的代码看看

    1 回复
  • 查看全部回帖
JOYCELEEEEE
输入是为输出。
回帖
146
 帖子
45
 积分
1941

近期热议

推荐标签 标签

  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1795 回帖
  • 创业

    你比 99% 的人都优秀么？

    85 引用 • 1399 回帖 • 1 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 795 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • SMTP

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

    4 引用 • 18 回帖 • 624 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 11 关注
  • 前端

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

    247 引用 • 1348 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 102 关注
  • frp

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

    20 引用 • 7 回帖 • 2 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 158 关注
  • Tomcat

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

    162 引用 • 529 回帖 • 5 关注
  • Swift

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

    36 引用 • 37 回帖 • 535 关注
  • MongoDB

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

    90 引用 • 59 回帖 • 1 关注
  • OpenStack

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

    10 引用 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3454 回帖 • 189 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 584 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • 创造

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

    178 引用 • 997 回帖

最新标签