強大的CSS：3種姿勢實現26個英文字母的案例

一、藉助CSS border實現案例

實現效果如下（為實時渲染效果）：

如何使用？

引用CSS檔案，例如：

<link rel="stylesheet" href="./css-letters1.css">

或者直接CSS程式碼到你的專案中：

/* 全域性樣式 */
.letter {
    color: #2486ff;
    border-style: solid;
    border-width: .5em;
    display: inline-block;
    position: relative;
}
.letter:after {
    border-style: solid;
    border-width: .5em;
    content: '';
    position: absolute;
}
/* 單個字母樣式 */
.letter[data-char="A"] {
    border-bottom: none;
    border-radius: 1em 1em 0 0;
    height: 2.05em;
    margin-top: -.05em;
    width: 1em;
}
.letter[data-char="A"]:after {
    border-bottom: none;
    border-left: none;
    border-right: none;
    left: 0;
    right: 0;
    top: .75em;
}
.letter[data-char="B"] {
    border-radius: 0 1em 1em 0;
    height: .5em;
    width: 1em;
}
.letter[data-char="B"]:after {
    border-radius: 0 1em 1em 0;
    bottom: 100%;
    height: .5em;
    left: -.5em;
    width: .9em;    
}
.letter[data-char="C"] {
    border-right: none;
    border-radius: 1em 0 0 1em;
    height: 1.5em;
    width: 1.5em;
}
.letter[data-char="C"]:after {
    border-bottom: none;
    border-left: none;
    border-top: none;
    height: .5em;
    right: 0;
    top: 0;
    width: .5em;
}
...

HTML部分如下：

<span class="letter" data-char="A"></span>
<span class="letter" data-char="B"></span>
<span class="letter" data-char="C"></span>
<span class="letter" data-char="D"></span>
<span class="letter" data-char="E"></span>
<span class="letter" data-char="F"></span>
<span class="letter" data-char="G"></span>
<span class="letter" data-char="H"></span>
<span class="letter" data-char="I"></span>
<span class="letter" data-char="J"></span>
<span class="letter" data-char="K"></span>
<span class="letter" data-char="L"></span>
<span class="letter" data-char="M"></span>
<span class="letter" data-char="N"></span>
<span class="letter" data-char="O"></span>
<span class="letter" data-char="P"></span>
<span class="letter" data-char="Q"></span>
<span class="letter" data-char="R"></span>
<span class="letter" data-char="S"></span>
<span class="letter" data-char="T"></span>
<span class="letter" data-char="U"></span>
<span class="letter" data-char="V"></span>
<span class="letter" data-char="W"></span>
<span class="letter" data-char="X"></span>
<span class="letter" data-char="Y"></span>
<span class="letter" data-char="Z"></span>

二、border加圓角與另一種風格字型

還是先看效果，實時渲染：

如何使用？

引用CSS檔案，例如：

<link rel="stylesheet" href="./css-letters2.css">

或者直接複製CSS程式碼到你的專案中，由於篇幅限制，我這裡僅顯示前幾個字母的CSS樣式

.letter-a {
    position: relative;
    width: 30px;
    height: 40px;
    background: white;
    border-radius: 10px 10px 0 0;
    border-style: solid;
    border-color: currentColor currentColor transparent currentColor;
    border-width: 10px 10px 0 10px;
}
.letter-a::before {
    content: "";
    position: absolute;
    top: 10px;
    height: 10px;
    width: 30px;
    background: currentColor;
}
.letter-b {
    position: relative;
    width: 30px;
    height: 30px;
    border-width: 10px 10px 10px  10px;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
    background: transparent;
}
.letter-b::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    height: 10px;
    width: 30px;
    background: transparent;
    border-radius: 0 12.5px 12.5px 0;
    border: 10px solid currentColor;
}
.letter-b::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -10px;
    height: 10px;
    width: 30px;
    background: transparent;
    border-radius: 0 12.5px 12.5px 0;
    border: 10px solid currentColor;
}
...

HTML部分程式碼使用示意：

<span class="letter-a"></span>
<span class="letter-b"></span>
<span class="letter-c"></span>
<span class="letter-d"></span>
<span class="letter-e"></span>
<span class="letter-f"></span>
<span class="letter-g"></span>
<span class="letter-h"></span>
<span class="letter-i"></span>
<span class="letter-j"></span>
<span class="letter-k"></span>
<span class="letter-l"></span>
<span class="letter-m"></span>
<span class="letter-n"></span>
<span class="letter-o"></span>
<span class="letter-p"></span>
<span class="letter-q"></span>
<span class="letter-r"></span>
<span class="letter-s"></span>
<span class="letter-t"></span>
<span class="letter-u"></span>
<span class="letter-v"></span>
<span class="letter-w"></span>
<span class="letter-x"></span>
<span class="letter-y"></span>
<span class="letter-z"></span>

每個字母都可以獨立使用。

不過這裡的實現有個不好的是，這裡的字母都是使用px單位實現的，因此，想要自如控制字母的大小不太方便。需要藉助transform進行縮放控制才行。

三、活用transform的css-sans字型生成

使用CSS生成的 無襯線26個英文字母。

實時效果如下：

//zxx: 接縫處有些間隙是因為對字型進行縮放導致，實際1:1呈現時候不會有這個現象。

hover對應程式碼可以看到對應字型部件，非常使用CSS圖形繪製的學習，如下截圖示意：

如何使用？

複製頁面上呈現的對應的CSS程式碼，然後HTML部分如下：

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="H"></div>
<div class="I"></div>
<div class="J"></div>
<div class="K"></div>
<div class="L"></div>
<div class="M"></div>
<div class="N"></div>
<div class="O"></div>
<div class="P"></div>
<div class="Q"></div>
<div class="R"></div>
<div class="S"></div>
<div class="T"></div>
<div class="U"></div>
<div class="V"></div>
<div class="W"></div>
<div class="X"></div>
<div class="Y"></div>
<div class="Z"></div>

要顯示哪個字母，就複製對應HTML到頁面上就好了。

四、點評與結束語

上面三個CSS生成26個字母的案例展示了CSS在圖形繪製方面的潛力，是非常好的CSS圖形繪製學習材料。

然而，要說具體的實用性，則並不見得多高，就像是頂級期刊的論文雖厲害，但並不適用於真正的商業實踐，因為其中成本很好，適用場景頁有限。

主要問題在於字母圖形全部都是使用px進行定位的。而實際使用，我們的字號是多變的，px這種固定單位想要實時變化呈現的字號大小是很麻煩的，只能通過縮放解決，但縮放在1倍螢幕密度顯示器下，容易出現接縫間隙，體驗不好。

所以，上面的字型生成案例需要進一步優化，把 px 定位全部改成 em ，這樣，就能通過外部 font-size 改變字形的大小，這樣，實用性就很強了！

另外，上面的3個案例，全部都是大寫英文字母，如果還支援小寫字母，那就真正強悍了，實際專案中大肆應用是很有可能的。這個以後有時間我可以挑戰下。

自己是一個五年的前端工程師,希望本文對你有幫助！

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645361/，如需轉載，請註明出處，否則將追究法律責任。