乐趣区

关于前端:CSS揭秘CSS中特殊字体技巧汇总

 目录:1、连字符断行
2、插入换行
3、自定义下划线
4、非凡的文字效果

1、连字符换行

问题形容:咱们在展现段落文本的时候,常常须要用到两端对齐的性能,但其有一个致命的缺点,那就是它会主动调整字符的间距,使得单词不会主动的换行,如下所示。


其视觉效果就十分蹩脚,所以须要一个办法在正确的中央断开单词,让单词在遇到换行的时候能主动拆分,也就是所谓的连字符换行,一行代码就能实现;
hyphens: auto;


2、插入换行

问题形容:当咱们须要手动插入换行的时候,首先想到的是 <br/> 标签,有无方法在不应用新标签的前提下实现灵便的插入换行的性能呢?

实际上应用伪类元素是最好的抉择,将伪类元素的 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%);

退出移动版