登录 注册

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

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

样式大小参照 FlowUs

  • 思源笔记

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

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

    23108 引用 • 93044 回帖 • 1 关注
  • Q&A

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

    8498 引用 • 38734 回帖 • 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 回帖
修改无序列表圆点大小 / 有序列表数字大小 & 字体

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons •
    付费者 捐赠者

    不太清楚，用你的代码和主题和文件并没有发现有问题，如图

    image.png

    不知道是否插件影响，建议把集市插件先关掉试试

    image.png

    不过，还是建议你加上这段代码，做个兼容处理

    /* li前缀图标大小 */
.protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action svg {
    height: var(--my-u-li-icon-size);
    width: var(--my-u-li-icon-size);
}

    经测试，其他主题下，以上代码片段不生效

    我测试了官方主题，Asri 主题，包括你的主题，都没问题，你那边不清楚什么原因，实在不行建议新建个空间测试看看。以排除是否什么东西干扰导致的。

    另外，我在 Mac 上 3.1.2 上测试的，不清楚是否和系统及版本有关。

    1 回复
  • 其他回帖
  • JOYCELEEEEE •
    订阅者 作者

    回到了正文中的问题，聚焦和闪卡状态下会失效 😂

    202408040918.jpg

    1 回复
  • 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 •
    订阅者 作者

    1. 代码片段

      /* 定义li前缀大小 */
:root {
    /* 无序列表圆点大小 / 有序列表数字大小 */
    --my-u-li-icon-size: 12px;
    --my-o-li-icon-size: 15px;
}
/* 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-u-li-icon-size);
}
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
    font-size: var(--my-o-li-icon-size);
}

    2. 主题
      202408041020.jpg
      经测试，其他主题下，以上代码片段不生效。

    3. 测试文档：测试.sy.zip
      经测试，有序列表在聚焦/闪卡状态下能够正常显示。

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

近期热议

推荐标签 标签

  • Love2D

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

    14 引用 • 53 回帖 • 538 关注
  • 书籍

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

    78 引用 • 391 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 638 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 24 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 370 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖 • 1 关注
  • 前端

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

    247 引用 • 1348 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • abitmean

    有点意思就行了

    • 30 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 17 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 254 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 2 关注
  • 微信

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

    132 引用 • 795 回帖
  • 职场

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

    127 引用 • 1706 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 913 回帖 • 248 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    77 引用 • 430 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 31 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 592 关注
  • 安全

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

    200 引用 • 816 回帖 • 1 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 2 关注
  • HBase

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

    17 引用 • 6 回帖 • 75 关注
  • V2EX

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

    17 引用 • 236 回帖 • 315 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    34 引用 • 148 回帖 • 1 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 656 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • Unity

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

    25 引用 • 7 回帖 • 158 关注

最新标签