分享三個純CSS實現26個英文字母的案例

收藏待读

分享三個純CSS實現26個英文字母的案例

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8360

本文可全文轉載,個人網站無需授權,只要保留原作者、出處以及文中鏈接即可,任何網站均可摘要聚合,商用請聯繫授權。

一、藉助CSS border實現案例

實現效果如下(為實時渲染效果):

原作者是joshnh,出處是 這裡

原作者實現的類名過於簡單,用在實際項目中很容易衝突,我對其進行了優化——基於屬性選擇器 [data-char="*"] 標記對應字母。

如何使用?

引用CSS文件,例如:

或者直接CSS代碼到你的項目中,由於篇幅較長,我這裡僅顯示前幾個字母的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部分如下:


























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

還是先看效果,實時渲染 ,如果沒有效果去原文https://www.zhangxinxu.com/wordpress/?p=8360瀏覽

原作者是HKK,出處是 這裡

原作者實現的到字母R就截止了,然後我就花了半小時仿照風格把後面STUVWXYZ這些字母都補全了,這樣26個字母就一個不落了。

如何使用?

引用CSS文件,例如:

或者直接複製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部分代碼使用示意:


























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

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

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

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

原出處地址 是這個

實時效果如下:

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

hover對應代碼可以看到對應字體部件,非常使用CSS圖形繪製的學習,如下截圖示意:

分享三個純CSS實現26個英文字母的案例

如何使用?

複製頁面上呈現的對應的CSS代碼,然後HTML部分如下:

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

四、點評與結束語

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

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

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

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

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

好了,就說這麼多。

希望本文內容對您的學習有所幫助。

分享三個純CSS實現26個英文字母的案例

本文為原創文章,會經常更新知識點以及修正一些錯誤,因此轉載請保留原出處,方便溯源,避免陳舊錯誤知識的誤導,同時有更好的閱讀體驗。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8360

(本篇完)

原文 : 張鑫旭

相關閱讀

免责声明:本文内容来源于張鑫旭,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。