登录 注册

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

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

样式大小参照 FlowUs

  • 思源笔记

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

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

    21206 引用 • 83573 回帖
  • Q&A

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

    7550 引用 • 34365 回帖 • 197 关注
温州 位置 13 回帖
6
6
125 63 62

相关帖子

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

欢迎来到这里！

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

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

    建议看看你有没有其他代码片段跟这个冲突

    1 回复
  • 其他回帖
  • 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 回复
  • 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 •
    付费者 捐赠者

    我已做了修改，你再试试。

    注意：增加了变量，只需要在 :root{} 中修改即可。

    1 回复
  • 查看全部回帖
JOYCELEEEEE
温州
回帖
106
 帖子
36
 积分
1764

近期热议

推荐标签 标签

  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 375 关注
  • 服务器

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

    124 引用 • 580 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    676 引用 • 535 回帖
  • OpenStack

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

    10 引用 • 1 关注
  • 人工智能

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

    129 引用 • 171 回帖
  • 自由行
    • 6 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Love2D

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

    14 引用 • 53 回帖 • 533 关注
  • Maven

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

    186 引用 • 318 回帖 • 319 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 465 关注
  • GitBook

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

    3 引用 • 8 回帖 • 1 关注
  • 音乐

    你听到信仰的声音了么？

    60 引用 • 511 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 465 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    553 引用 • 3531 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 603 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • Notion

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

    5 引用 • 26 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 734 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 65 关注
  • 友情链接

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

    24 引用 • 373 回帖 • 2 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 910 回帖 • 228 关注

最新标签