【分享】偷懒干货 - 送给小白的字体 css

饮水思源,最近几天在论坛得到很多大佬的帮助,其实我是真小白,平时没有太多时间在研究计算机相关知识。so,感同身受,将我积攒的一些字体 css 分享给,现在以及未来可能使用思源的,小白同学们。

1 下载插件

首先,你要在思源的插件市场下载这个“配色方案”插件,仔细阅读这个说明页面,了解如何修改字体 css 的基本操作。(感谢这个大大,救我一枚颜狗心)

image.png

2 我的一些字体示例

1 粉色

image.png


  background-color: rgba(218, 160, 180, 0.95);
 width: 70px;
 text-align: center;
 color: white;
 padding: 5px;
 font-size: 30px;
 border-radius: 1px;
 border: 3px solid rgba(234, 221, 225, 0.95);
 height: 7px;

2 黄色邮票

image.png

 border-radius: 3px;
 padding: 0em 0.3em;
 border-color: inherit;
 border-width: 2px;
 border-style: dashed;
 background-color: rgb(255, 235, 205);
 color: rgb(0, 0, 0);

3 蓝色注释条儿

image.png

 border-radius: 3px;
 padding: 0em 0.3em;
 border-color: inherit;
 border-width: 2px;
 border-style: dashed;
 background-color: rgb(70, 130, 180);
 color: white;
 font-size: 30px;

4 漫画对白框

image.png

 background-color: rgba(255, 255, 255, 0);
 background-size: 4px 3px;
 border-style: solid;
 border-width: 2px;
 box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
 box-sizing: border-box;
 color: inherit;
 cursor: pointer;
 padding: 0em 0.3em;
 display: inline-block;
 transition-duration: 235ms;
 transition-timing-function: ease-in-out;
 transition-delay: 0s;
 transition-property: all;
 border-radius: 255px 15px 225px / 15px 225px 15px 255px;
 font-size: 135%;

5 红正圈字

image.png

这个最简单易懂,小白想改字体风格,最开始可以从这个开始

 color: rgb(255, 182, 193);
 border-radius: 5px;
 border: 2px dashed rgb(255, 182, 193);

6 绿圆圈字

image.png

 border-radius: 20px;
 padding: 0em 0.3em;
 border-color: inherit;
 border-width: 4px;
 border-style: double;
 background-color: rgb(0, 139, 139);
 text-align: center;
 color: white;

7 三色药丸光圈

这个我一般用做大纲标注,总共三个颜色。这是我第二推荐可自行修改定义的风格,其 css 也超简单

image.png

image.png

image.png

以下是绿药丸示例,黄色和白色,更改 color 的 rgb 数值就可以了

 color: rgb(72, 209, 204);
 border-radius: 15px;
 border: 1px solid rgb(72, 209, 204);
 box-shadow: rgb(72, 209, 204) 3px 3px 5px;
 font-size: 135%;

3 说明

  • 大家可以直接粘贴我的方案,也可以略微去研究那么些许些许的 css,就可以改出自己想要的字体风格。
  • 其实这里面的大多方案,都是我跟着插件大佬改的,修改一些符合我的审美。
  • 我的经验是,有些小白就连 css 是啥都不知道,这种时候就无脑先复制粘贴这些 css 先用就行(希望没有丑到你们)
  • 其中的 css 知识,都是在 CSS 教程 | 菜鸟教程 (runoob.com)这个网站学习,有兴趣想自定义字体风格的,也可以去看看。
  • 我的想法是,字体 css 在折腾前,1 可以先拿彩笔在纸上打个草样,选出你喜欢的几种样式。2 然后去菜鸟学院了解一下基础的 css 知识,看懂这些代码样本的大致意思,3 然后再参考我给的这些代码样本,更改自定义你的风格。根据这个顺序,乃是最轻松最有效率的。
  • 又 ps:这些代码是我在很久之前的某个晚上,花了两三个小时照着改的,并没有留下任何学习笔记,so,万一有其他修改方面的问题,请积极询问论坛大佬。目前我在 css 领域,基本彻底恢复了“清澈的愚蠢”。
  • 又又 ps:希望路过的各路计算机大佬,请留下你漂亮新奇创新独特“装逼”的字体 css,我真是很想大开眼界。
  • 思源笔记

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

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

    22992 引用 • 92471 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 打开思源的开发者工具,然后鼠标点过去就可以直接预览改动后的结果了。

  • pakeh2866

    支持

  • kikkawa

    考虑到导出 Markdown 文本的通用性,我想要把加粗文本,还有斜体字改成这样的样式需要怎么写 CSS 呢,我用 ChatGPT 尝试过了,写不出来

    1 回复
  • Floria233

    这种只限定在思源的“配色方案”这个插件下这么用。

    另一种用法是,小白对于字体有美化要求时,可以通过这些效果图和 css 代码,些微自行调整。

    加粗文本斜体字改成这种样式——这句话我不太明白意思,这两种应该是 md 规定的语法效果,没必要再用 css。

  • Anastasia

    我有个疑问。就是我使用“配色方案”插件进行更改之后。我发现导出 PDF 的颜色设计并不是对应的“配色方案”的颜色,想问问楼主知道怎么解决吗?

    1 回复
  • Floria233

    这个应该是思源的设计还是这个插件的问题?

    我没有导出过 pdf😂 不好意思没法帮你

请输入回帖内容 ...