解决文字和text-decoration:underline下划线重叠问题

一、text-decoration:underline下划线的问题

CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。

上图几个中文下边缘正好都是横线，结果，可以看到，基本上合在一起分不清谁是谁了，换成微软雅黑字体（见下图），似乎变本加厉了：

有没有什么办法让下划线不要靠得这么近，或者文字可以完整清晰地显示呢？

有，方法还不少，下面逐一介绍，大家可以根据自己的实际项目需求，选择合适的技术选型。

方法一：text-decoration-skip指定覆盖关系

理论上，使用下面的CSS：

a { text-decoration-skip: ink; }

机会有类似下图的效果：

text-decoration-skip是text-decoration相关的CSS3新的属性，还有很多其他新的CSS3 text-decoration属性，可以指定下划线类型等，具体可参见我之前的文章：“了解CSS3 text-decoration新特性新表现”。

看上去效果很不错，但是遗憾的是，即使现在快到2017年了，此属性的浏览器支持情况还是很不乐观，包括大头Chrome浏览器目前尚未支持。

Safari 8+ supports -webkit-text-decoration-skip with values none and skip (other values behave like none or skip)

目前也就是Safari 8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值，换句话说，Safari 8+浏览器默认下划线就是和文字非穿越而是避让效果。这进一步导致CSS代码中没有text-decoration-skip属性出现的必要了。所以，此方法虽然最原生，但时机还不够。

方法二：使用border-bottom属性模拟

内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果，类似下面的CSS代码：

a {

    text-decoration: none;

    border-bottom: 1px solid;

}

效果类似下图：

如果觉得border-bottom模拟的下划线还是和文字走得太近，我们可以使用padding-bottom再撑开点距离，例如：

a {

    text-decoration: none;

    border-bottom: 1px solid;

    padding-bottom: 5px;

}

则效果类似下面截图：

眼见为实，您可以狠狠地点击这里：border-bottom模拟下划线文字无重叠demo

注意，使用border-bottom模拟下划线的时候，border-color最好缺省，这样就会使用文字的color颜色作为边框色，这样，鼠标hover的时候，下划线会自动和文字一起变色，类似下图效果：

使用border-bottom模拟的另外一个好处就是我们还可以使用虚线下划线：

a {

    text-decoration: none;

    border-bottom: 1px dashed;

}

类似下面实际项目需求的截图就可以使用这种策略：

方法三：使用box-shadow属性模拟

我们也可以使用CSS3 box-shadow属性模拟下划线，代码如下：

a {

    text-decoration: none;

    box-shadow: 0 1px;

}

同样，建议颜色值缺省，使用color属性的颜色值。

效果基本上和border-bottom如出一辙，如下截图：

眼见为实，您可以狠狠地点击这里：box-shadow模拟下划线效果demo

相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。

但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。

方法四：使用background-image属性模拟

就是使用CSS3渐变绘制实线或虚线背景图。

效果截图如下：

方法五：使用SVG滤镜处理

该SVG滤镜相关HTML代码如下：

<svg class="out">

  <filter id="svg-underline" primitiveUnits="objectBoundingBox">

    <!-- 原图文基础上水平垂直方向一点点扩展并存储到新的层上 -->

    <feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology>

    <!-- 一个蓝色矩形，高度3%然后宽度100%，位置稍微往下一点 -->

    <feFlood flood-color="#34538b" width="1" height="0.03" x="0" y="0.9" result="underline"></feFlood>

    <!-- 遮罩蓝色矩形，这样，文字重合部分边缘会镂空 -->

    <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>

    <!-- 效果合体 -->

    <feMerge>

      <feMergeNode in="underline"></feMergeNode>

      <feMergeNode in="SourceGraphic"></feMergeNode>

    </feMerge>

  </filter>

</svg>

方法六：使用canvas实现（著名的Underline.js）

Underline.js项目地址：https://github.com/wentin/underlineJS

作者是这位妹纸（图片源自网络）：

zhangwenting，目前任职于 Adobe Typekit。

underline.js同样实现的是下划线和文字重叠自动避让的效果，类似下图：

您可以狠狠地点击这里：canvas原理的underline.js解决下划线重叠demo

基本上，下划线文字穿越效果只有英文才好看，中文如果穿越，我去，基本上下划线就没了，尤其类似“金玉全王”这样的汉字：

所以，对于中文，最好的效果还是避让，就是直接线和文字留点距离，这样是最好的。对于，英文为主的内容，则text-decoration-skip效果确实还是挺有价值的。

根据我自己对underline.js的使用，发现，局限性还不小，内联元素最好要inline-block化，纯inline生成的canvas的垂直位置不是很精准，然后，不支持文字自动换行下划线折线显示，毕竟canvas元素是个独立的替换元素，跟图片一样，不可能换行时候分一半上面再一半下面。

基本上，适合用在局部一些大的标语，标题，slogon等位置或者追求视觉的官方网站或活动页面上使用。

八、结束语

今天群里都在玩风景照一下子变成动漫风格的滤镜，实际上，使用PS，分分钟搞定。

我特意找了张质量很差的自己钓鱼拍的风景图，PS中滤镜搞搞，2分钟，就好了，效果如下：

效果还行，如果换个清晰明丽的图，效果会更好。

步骤如下：
1. 滤镜→滤镜库→干画笔→0 10 1！
2. 滤镜→Camera Raw滤镜→色温高，色调绿，曝光增加，对比对增加，阴影和黑色最大，饱和度和清晰度适当增加，然后第三个“细节”小按钮，数量和蒙版很大的值，半径和细节自己看着调；
3. done!