一, 借助 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 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/dbea07f0c972