【分享】偷懒干货 - 送给小白的字体 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,我真是很想大开眼界。
  • 待分类

    用户发帖时如果不填标签,则默认加上“待分类”。这样做是为了减少用户发帖的负担,同时也减少运营维护的工作量。具有帖子更新权限的用户可以帮助社区进行帖子整理,让大家可以更方便地找到所需内容。这里是关于这样设计的一些思考,欢迎讨论。

    1 引用 • -272 回帖 • 4 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...