饮水思源,最近几天在论坛得到很多大佬的帮助,其实我是真小白,平时没有太多时间在研究计算机相关知识。so,感同身受,将我积攒的一些字体 css 分享给,现在以及未来可能使用思源的,小白同学们。
1 下载插件
首先,你要在思源的插件市场下载这个“配色方案”插件,仔细阅读这个说明页面,了解如何修改字体 css 的基本操作。(感谢这个大大,救我一枚颜狗心)
2 我的一些字体示例
1 粉色
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 黄色邮票
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 蓝色注释条儿
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 漫画对白框
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 红正圈字
这个最简单易懂,小白想改字体风格,最开始可以从这个开始
color: rgb(255, 182, 193);
border-radius: 5px;
border: 2px dashed rgb(255, 182, 193);
6 绿圆圈字
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 也超简单
以下是绿药丸示例,黄色和白色,更改 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,我真是很想大开眼界。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于