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

全目录

本系列文章，主要是围绕css3属性，实现咱们常见的各类效果，这些效果都是咱们实战开发中常常能够用到的效果：

1. css揭秘实战技巧- 背景与边框 [一]
2. css揭秘实战技巧- 形状 [二]
3. css揭秘实战技巧 - 视觉效果[三]
4. css揭秘实战技巧 - 字体排印[四]
5. css揭秘实战技巧 - 用户体验[五]
6. css揭秘实战技巧 - 结构与布局[六]
7. css揭秘实战技巧 - 过渡与动画[七]

前言

一：连字符断行

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%);
复制代码