【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等，概不負責