一、借助CSS border实现案例

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

如何使用？

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

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

如何使用？

引用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代码，然后HTML部分如下：

要显示哪个字母，就复制对应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/，如需转载，请注明出处，否则将追究法律责任。