CSS揭秘（CSS中特殊字体技巧汇总）
目录：
1、连字符断行
2、插入换行
3、自定义下划线
4、特殊的文字效果
1、连字符换行
问题描述：我们在展示段落文本的时候，经常需要用到两端对齐的功能，但其有一个致命的缺陷，那就是它会自动调整字符的间距，使得单词不会自动的换行，如下所示。
文章图片
其视觉效果就非常糟糕，所以需要一个方法在正确的地方断开单词，让单词在遇到换行的时候能自动拆分，也就是所谓的连字符换行，一行代码就能实现；
hyphens: auto;
文章图片
2、插入换行
问题描述：当我们需要手动插入换行的时候，首先想到的是实际上使用伪类元素是最好的选择，将伪类元素的content设置为'\A'或'0x000A'能实现换行，但是默认情况下插入的换行符会和附近的空白符进行合并，这就需要我们手动的保留文档中的换行符；
标签，有无办法在不使用新标签的前提下实现灵活的插入换行的功能呢？
dd::after {
content: '\A';
white-space: pre;
}通过这种方式就能不添加新的标签，就在已有标签后面添加换行。但是要注意一点，如果在dd标签伪类添加换行，那么后面所有的dd标签都会受到影响，所以可以通过父子标签或兄弟标签限制受影响的dd标签，如：
dt > dd::after {
content: '\A';
white-space: pre;
}3、自定义下划线
问题描述：正常的下划线效果通过text-decoration：underline实现，其样式是固定的，有时无法满足视觉需求，有其他方法可以代替实现下划线效果嘛？最容易想到的方法就是用边框来模拟下划线，边框可以实现宽度和颜色，更加灵活多变。
a {
text-decoration: none;
border-bottom: 1px solid gray;
}
文章图片
但是这样的方式存在着几个问题，首先就是如何控制下划线和文字之间的间隙，我们可以把盒子的display设置为inline-block，然后设置line-height来控制下划线和文字的距离，让文字更贴近下划线。
文章图片
这又衍生出另外的问题，如果带下划线的文字换行，会造成以下效果：
文章图片
最终的解决方案是依靠渐变！这是个高级技巧，可以了解以下：
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
4、特殊的文字效果
几种特殊的文字效果的实现，如:凸版印刷、空心字、文字外发光、文字凸起效果其实就是利用各种阴影效果相结合实现的视觉效果。
（1）文字凸版印刷
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
文章图片
（2）空心字效果
background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
1px -1px black, -1px 1px black;
文章图片
（3）文字外发光
background: #203;
color: #ffc;
text-shadow: 0 0 .1em, 0 0 .3em;
文章图片
（4）文字凸起
background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%);
【CSS揭秘（CSS中特殊字体技巧汇总）】
文章图片
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理