css 下划线_css揭秘-字体排印

连字符断行

难题

text-align: justify 可以使段落中的文字两端对齐，但是对于英文来说，如果要断句的正好是一个长的单词，那么它就会去到下一行，在上一行看到的单词间距就会比较大，并不美观。因此，有没有一种方法可以使单词使用连字符切换到下一行呢？

解决方案

css3 引入了一个新的属性 hyphens。它接受三个值：none、manual、auto。 manual 是它的初始值，可以在任何时候手工插入软连字符实现断词折行的功能。none 会禁用这种行为；很神奇的是：hyphens: auto 即可实现上述需要的效果。

插入换行

难题

通过 css 插入换行通常与定义列表有关，但有时候也会涉及其他场景。举例来说，考虑以下这段代码：

<

希望展示的效果如下图1所示，因此添加一些样式，但是dt、dd都是块级元素，因此展示的是如下图2所示的效果，于是大家添加 display：inline-block 最终又会得到如下图3的效果。

那么是否有一种方法可以实现最终的效果呢？

解决方案

其实，要做的是在 dd 后面添加一个换行，如果使用手动的 <br/> 的话，不仅在代码的可维护性方面是很糟糕，而且还污染了代码的层次结构。有一个 Unicode 字符专门代表换行符的：0x000A，在css中这个字符写作“000A"，或者简写为”A“，因此可以用它来作为 ::after 伪元素的内容，并将其添加到 dd 的尾部。

dd

尝试一下，发现并没有什么变化。这段 css 代码相当于在 HTML 结构中的所有关闭标签 </dd> 之前添加换行符。但是在 HTML 中默认情况下，输入换行符会跟相邻的其他空白符进行合并。使用 white-space: pre 即可保留空白符，最终代码如下：

dt

上述代码看似可以实现想要的效果，但是如果在第二行后面再添加一个邮箱，就会发现新添加的邮箱会自动折到下一行了，说明代码的健壮性还是欠缺点。

dd

文本行的斑马条纹

难题

几年前，在刚刚获得 :nth-child() / :nth-of-type() 伪类之后，最常用其来解决的一个需求就是表格的“斑马条纹”。只需要下面代码即可实现表格的“斑马条纹”。

tr

但是如果将其应用到文本行中还是有些力不从心。不得不将文本包裹在一个个 div 中再使用伪类去实现。那么，有没有一种方案可以应用在文本行中呢？

解决方案

可以对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适应 font-size 的变化了。

<

调整tab的宽度

难题

通常使用 <pre> 和 <code> 元素来显示代码，它们具有浏览器所赋予的默认样式。这些默认样式往往是：

pre

默认的样式远不足以解决代码展示遇到的种种问题。尽管用 tab 非常合适来展示代码，但是人们通常不会使用 tab，因为 tab 在浏览器上会显示 8 个字符，这对于展示来说既难看而且又是非常浪费空间的。

解决方案

css3 中提供一个新的 css 属性 tab-size 可以控制这个情况，它可以接受一个数字（表示字符数）或者一个长度值（不经常使用），我们通常把它设置为 4 或者 2（2 更为普遍）。

pre

华丽的&符号

难题

在文学作品的字体排印中，会发现简写的 & 符号备受推崇，但是可以显示出优美 & 字符的字体往往并不适用于页面中的其他文本。毕竟对于标题来说，真正美丽而优雅的效果正是来源于清爽的无衬线字体与华丽的衬线 & 符号之间的对比。

在写代码的过程中，通常会通过脚本或者手动的使用 <span> 标签把每个 & 符号包起来：

<

然后给 .amp 这个类指定想要的样式：

.

可以看到如下效果：

这个方法可以实现，但是这个方法相当麻烦，而且有时候完全行不通，在某些情况下（CMS ）无法轻易修改 HTML 结构。是否可以让 CSS 去单独的美化某个字符呢？

解决方案

通常会在 font-family 中同时声明多个字体，这样即使指定的最优先字体不可用，也可以回退到其他符合整体风格设计的字体。这个机制对单个字符也是有效的。如果某款字体可用，但只包括某几个字符，那它就会用来显示这几个字符，这个规则对本地字体和 @font-face 引入的嵌入字体都是有效的。

@

上述方法比较灵活，但是对于只想使用系统本地字体的人来说就不够理想了。我们知道， @font-face 规则中的 src 描述符还可以接受 local() 函数用来指定本地字体的名称。

@

但是这些字形又覆盖了所有的字体，并不能起到美化单独字符的作用，还需要一个描述来声明想用这几款本地字体来显示哪些字符。这个描述叫做 unicode-range。

unicode-range 描述符只在 @font-face 规则内部生效，可以把字体作用的字符范围限制在一个子集内，这个语法是基于“Unicode码位”的，可使用如下命令在浏览器控制台查看所需要的字符的十六进制码位。

"&"

得到了字符的十六进制码位，然后需要在码位前面加上 U+ 作为前缀。可以这样来声明：

unicode-range

如果你想指定一个字符区间，还是要加上 U+ 前缀，比如 U+400-4FF 。实际上对于这个区间来说，你还可以使用通配符，以这样的方式来写：U+4?? 。同时指定多个字符或多个区间也允许的，把它们用逗号隔开即可，比如 U+26, U+4??, U+2665-2670 。

@

最终的呈现效果

用不同的字体来美化数字、符号、标点等。各种创意完全停不下来！

自定义下划线

难题

文本的下划线中，后来的 css 给了一种解决方案：

text-decoration

但是，满足不了我们的需要，因此我们将主意打到了下边框上，用边框来模拟下划线。尽管用 border-bottom 模拟出来的文本下划线给予了我们对颜色、线宽、线型的控制能力，但它并不完美。这些“下划线”跟文本之间的空隙很大，位置甚至比字形的降部（descender）还要低！我们可以试着修复这个问题，将这个链接的 display 属性设置为inline-block ，再指定一个稍小的 line-height ，例如说：

display

这个方法确实可以让下划线向文本贴近，但同时会阻止正常的文本换行行为。我们还可以尝试运用一层内嵌的 box-shadow来模拟下划线的效果：

box-shadow

它跟 border-bottom 存在的问题一样，只不过它显示出来的下划线离文本稍近一些。那么有没有其他办法可以产生即美观又灵活，而且可以定制各种样式的下划线呢？

解决方案

最佳方案来自于 background-image 及其相关属性。背景可以完美地跟随换行的文本，而且可以通过 CSS 渐变来凭空生成所需的图像：

background

但是，下划线会穿过某些字母（比如 p 和 y）的降部。如果下划线在遇到字母时会自动断开避让，因此作如下修改：

background

修改后，下划线遇到有降部的字母后会断开避让

background

虚线下划线

波浪下划线回家加上

现在 css3 中有对应样式可以实现上述的效果：

1. text-decoration-color 用于自定义下划线或其他装饰效果的颜色。
2. text-decoration-style 用于定义装饰效果的风格（比如实线、虚线、波浪线等）。
3. text-decoration-line 用于线条的样子，删除线下划线等等。
4. text-underline-position 用于微调下划线的具体摆放位置。

现实中的文字效果

难题

在网页中，对文字进行艺术加工已经变得非常普遍了，比如凸版印刷效果，当鼠标悬停时的模糊效果，浮雕（伪 3D）效果，等等。要达成这些效果，会用到一系列精心排列的文本投影，并且需要明白我们的眼睛是如何工作的，因为这些手段往往建立在视错觉的基础上。

解决方案

凸版印刷效果

background

空心字效果

<

文字外发光效果

<

文字凸起效果

background

SCSS 中的 mixin 写法如下：

@mixin

把所有的投影都设成黑色，并且去掉最底层的投影，就可以模拟出一种在复古标志牌中常见的文字效果。

color

@function