分享三个纯CSS实现26个英文字母的案例

这篇文章发布于 2019年01月11日，星期五，11:30，归类于 CSS相关。 阅读 17822 次, 今日 5 次 15 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8360
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、借助CSS border实现案例

实现效果如下（为实时渲染效果）：

原作者是joshnh，出处是这里。

原作者实现的类名过于简单，用在实际项目中很容易冲突，我对其进行了优化——基于属性选择器[data-char="*"]标记对应字母。

如何使用？

引用CSS文件，例如：

<link rel="stylesheet" href="./css-letters1.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部分如下：

<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加圆角与另一种风格字体

还是先看效果，实时渲染：

原作者是HKK，出处是这里。

原作者实现的到字母R就截止了，然后我就花了半小时仿照风格把后面STUVWXYZ这些字母都补全了，这样26个字母就一个不落了。

如何使用？

引用CSS文件，例如：

<link rel="stylesheet" href="./css-letters2.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部分代码使用示意：

<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个案例，全部都是大写英文字母，如果还支持小写字母，那就真正强悍了，实际项目中大肆应用是很有可能的。这个以后有时间我可以挑战下。

好了，就说这么多。

希望本文内容对您的学习有所帮助。

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8360