【CSS】纯 CSS 实现24个大写英文字母 CSS-fonts

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

？文末有彩蛋，不去看一看？

前文【专栏-效率工具】系列文章，从开发工具、版本控制工具、接口调试工具 到 开发规范，再到博客搭建工具等等，工做学习中用到的工具，分别做了介绍，养成好习惯，减小累赘代码，提升代码质量，减小 bug，提升开发效率。

记录提升平常码字幸福感的【实测能用】自用效率工具，持续更新、记录

仅当参考，按需食用，不足之处，欢迎大佬不吝赐教，补充完善，欢迎分享

• 工欲善其事，必先利其器。实践（巧偷懒）促进科技发展-_-!
• 本文分享 CSS-fonts： CSS 实现 24 个英文字母，进一步加深学习CSS的印象

from CSS SANS / fonts， 勿做他用，仅供学习使用

纯 CSS 实现 大写字母 效果以下

神奇的CSS，万能的CSS， 这里列举两个 A & G, 其余同理，见网站 CSS SANS / fonts

1. 字母 A

源代码

.A {
  position: relative;
  left: 30px;
  width: 60px;
  height: 91px;
  border-bottom: solid 14px#000000;
}
.A:before {
  transform: skew(-19deg, 0);
  position: absolute;
  content: '';
  top: 12.5px;
  left: 0;
  width: 16px;
  height: 125px;
  background-color: #000000;
}
.A:after {
  transform: skew(19deg, 0);
  position: absolute;
  content: '';
  top: 12.5px;
  left: 45px;
  width: 16px;
  height: 125px;
  background-color: #000000;
}
复制代码

2. 字母 B

B 的源码

.B {
  position: relative;
  top: 12.5px;
  left: 10px;
  width: 60px;
  height: 125px;
  border-left: solid 16px#000000;
}
.B:before {
  position: absolute;
  content: '';
  width: 52px;
  height: 39px;
  border-width: 15px15px10px0;
  border-color: #000000;
  border-style: solid;
  border-radius: 0 240%180%0 /0 180%180%0;
}
.B:after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 58px;
  height: 43px;
  border-width: 10px15px15px0;
  border-color: #000000;
  border-style: solid;
  border-radius: 0 180%220%0 /0 180%180%0;
}
复制代码

3. 字母 G

G 的源代码

.G {
  position: relative;
  top: 12.5px;
  left: 10px;
  width: 84px;
  height: 95px;
  border-width: 15px12px15px16px;
  border-color: #000000;
  border-style: solid;
  border-radius: 50%;
}
.G:before {
  transform: rotate(45deg);
  position: absolute;
  content: '';
  top: 2px;
  left: 48px;
  background-color: #ffffff;
  width: 90px;
  height: 90px;
}
.G:after {
  position: absolute;
  content: '';
  bottom: 0.5px;
  right: 7px;
  width: 28px;
  height: 36px;
  border-width: 13px14px0 0;
  border-color: #000000;
  border-style: solid;
}
复制代码

其余字母就不一一列举了，见 官网

---

这里列举部分自定义指令仅做参考学习，抛砖引玉， 更多阅读推荐：

优化美丽温馨的开发环境 、

【效率工具】【接口调试工具-Insomnia】、

下一代接口模拟工具-mock service worker

Vue 自定义指令-水波纹效果&水印效果（三）

【Utils】那些经常使用的 JavaScript 工具函数（一）...-，-、 有没有get到呢?

欢迎各路大神评论出你的私藏工具, 把你的好用的【效率工具】分享给你们=，=

今日份预告不出来了：

在掘金，帮你养成好习惯，持续学习，追求极致，务实敢为！加油

继续更新技术文 分享一些积累的 codes： utils/components/styles 等等吧

下一篇敬请期待！ hahah~

文末彩蛋

小娱乐，你不来笑一笑：

真香警告：

千万不要执行这个只有一行代码的.sh :(){:|:&}xx

免责声明：出现任何问题 bug等，概不负责