css揭秘实战技巧 - 字体排印[四]

全目录

本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：

前言

一：连字符断行

1. 两边对其

text-align: justify;

效果如下：

2. 连字符断行

连字符用： $shy 去表示。如果我们想使用连字符断行，可以通过hyphens 去控制，

hyphens: none // 隐藏连字符
hyphens: manual //显示连字符
hyphens: auto //自动

代码如下：

<div>
    the onlu way to get rid of a temp &shy tation is to yield to it;
</div>

width: 100px;
height: 100px;
border: 1px solid #ddd;
text-align: justify;
hyphens: manual;

效果如下：

二：插入换行

在我们实际开发过程中，换行这种事情是经常需要的，可能大部分时候，直接在想换行的地方加一个"<br>"即可，这样方案没问题，但是每个换行的地方都要加一个br，可维护性会相对差一点, 那么，是否有其他更好的方案呢？

实际上，有一个 Unicode 字符是专门代表换行符的:0x000A1。在 CSS 中，这个字符可以写作 "\000A"，或简化为 "\A"。我们可以用它来作为 ::after 伪元素的内容，并将其添加到每个元素的尾部，

代码如下：

span::after {
    content: '\A';
}

我们设置以后，发现并没有生效，为什么呢？这是因为换行符会与其相邻的空白符进行合并，所以最后结果还是没有换行，所以，接下来要做的就是，如何不让换行符和空白符合并呢？答案就是：white-space: pre;

代码如下：

span::after {
    content: '\A';
    white-space: pre;
}

三：文本行的斑马条纹

说到斑马条纹，我们第一时间想到的可能就是选择器:nth-child(odd/even), 通过分别设置奇数行和偶数行不同样式，但是这种方法是对多个不同的标签去设置，例如ul下面有多个li，就可以这样设置.

但是如果只是一个段落文本，那该如何设置斑马条纹呢？

首先，我们看一下最终的效果：

方案一：切割段落，到不同的标签上

将段落切成多段，然后分别放到多个标签下，然后再对标签使用nth-child设置样式，但是，很显然，这种方式太low了，怎么切分成多个段落？而且又增加了这么多新标签，对性能也影响。

方案二：只有一个标签

采用渐变去实现条纹背景，同时配合行高实现垂直居中。代码如下：

//css
width: 300px;
line-height: 1.6em;
background-image: linear-gradient(to bottom, #ddd 50%, transparent 0);
background-size: 100% 3.2em;
background-origin: content-box;

//html
<p>
    结对编程（英语：Pair programming）是一种敏捷软件开发的方法，两个程序员在一个计算机上共同工作。一个人输入代码，而另一个人审查他输入的每一行代码。
</p>

四：调整 tab 的宽度

方案一：使用JSON.stringify(data, null, 4)

第三个参数控制缩紧大小

方案二：用使用新属性tab-size去控制

tab-size: 4;

五：自定义下划线

1. 自带下划线

代码如下：

text-decoration: underline;

效果如下：

但是，使用自带的下划线，我们无法设置下环线的颜色或者其他效果，这是，我们想到的就是使用边框，阴影，甚至backgroud去模拟下划线。

2. border实现

代码如下：

border-bottom: 1px solid #000;
line-height: 0.9em //让边框更贴近文字

3. box-shadow实现

代码如下：

box-shadow: 0px 1px;
line-height: 0.9em; //让边框更贴近文字

4. background实现

代码如下：

background: linear-gradient(green, green) no-repeat;
background-size: 100% 1px;
background-position: 0px 1em; //设置背景的起始位置

5. css新特性搞定

也就是说，现在其实有新属性是可以设置下划线的效果的，

text-decoration-color 用于自定义下划线或其他装饰效果的颜色。
text-decoration-style 用于定义装饰效果的风格(比如实线、虚线、波浪线等)。
text-decoration-skip 用于指定是否避让空格、字母降部或其他对象。
text-underline-position 用于微调下划线的具体摆放位置。

当然，以上新特性可能部分浏览器还没有到支持。

六：现实中的文字效果

1. 空心字体

实现原理：通过设置四个方向的偏移量，然后所有偏移量的效果组合在一起，就实现了类似边框的效果。代码如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 3px 3px red, -3px -3px red, -3px 3px red, 3px -3px red;

2. 字体外发光效果

实现原理：即设置文字的阴影效果即可。

代码如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 10px yellow;

3. 文字凸起效果

实现原理：主要思路就是使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果。

代码如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 2px hsl(0,0%,85%),
             0px 0px 4px hsl(0,0%,75%),
             0px 0px 6px hsl(0,0%,65%),
             0px 0px 8px hsl(0,0%,55%),
             0px 0px 10px hsl(0,0%,45%);