关于前端:冷门的-textemphasis有什么用呢

就一般而言，咱们所做的页面并非对于文学类用户，因而也不太可能会接触到“着重号”这个符号。如果对于 word 不生疏的敌人应该会晓得在 word 中有一个文本设置，就是设置“着重号”的。

电脑中没有 word，就从百度上搜了一张，反正呢，大略就是这个成果了。

那么本文要说的 CSS 属性也就是这个“着重号”的属性，咱们能够通过 text-emphasis 属性设置文本“着重号”款式。这是 text-emphasis-color 和 text-emphasis-style 这两个属性的简写形式，也就是说，咱们能够通过 text-emphasis 同时设定“着重号”字符款式以及色彩，比方：

p {
    -webkit-text-emphasis: dot red;
    text-emphasis: dot red;
}

那么就能够看到这样的成果。

至于在 word 中看到的是不是这样的成果，这个我也不晓得了，反正呢，在 web 页面中，咱们所看到的着重号不仅能够批改字符款式以及色彩，还能够批改大小和地位。

• text-emphasis-style 有好几个属性值，并且也 能够输出任意字符；
• text-emphasis-color 则能够应用惯例的 web 中应用的色彩值，rgba()、rgb()什么的都能够；

而如果想要调整地位的话，那么就是要额定一个属性 text-emphasis-position，尽管看着这个属性跟 style 和 color 很相近，但并不是 text-emphasis 简写中的一个。那么对于 text-emphasis-position 在惯例的状况下，咱们能管制的地位是 上以及 下这两个方向，也就是：

• text-emphasis-position: over;
• text-emphasis-position: under;

如想要理解更多的话，能够翻阅一下 MDN 中的具体介绍，这里不赘述。那么依照下面说的，咱们把 CSS 局部批改一下，就像这样：

p {-webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
}

而后失去的后果就是：

看着是不是很像文本的下划线 text-decoration: underline; 的成果呢？那咱们再减少一条这个属性看看成果。

p {-webkit-text-emphasis: '——' rgba(255, 0, 0, .5);
    text-emphasis: '——' rgba(255, 0, 0, .5);
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;
    text-decoration: underline;
}

这两个是不同的属性，差别必然也是有的。具体就不细化，次要的差别通过文档也是能够看到。这里须要提一下的是，text-decoration 属性值如果父级设定了 underline 款式，那么子级设定 overline，两个线条款式是会存在，就算是更换了 text-decoration-style 值也是如此。

而 text-emphasis 当咱们扭转了其中的属性值之后，后果也就不同。同时，如果咱们 未设定色彩值的话，“着重号”的色彩将会继承元素本身的文本色彩 。因为能够设定色彩值，所以咱们同样 能够应用 transparent 间接设置元素为通明。

提到继承，这里须要留神一个点，“着重号”的文本大小差不多是失常文本的一半左右。

回顾一下后面提到的几个点：

• 能够输出任意字符；
• 如未设定色彩将继承元素本身的 color 值，也能够设置为通明；
• “着重号”的大小是失常文本的一半左右；

联合这几个点，咱们能够这样玩一下。

这里有一些中央是没有“着重号”，有一些是空白的或者特殊字符，局部是轻易输出，局部是成心而为之。次要是想看看在一些特殊字符状况下，“着重号”的显示状况。

• 只会显示一个字符，无论该字符是全角还是半角字符，甚至是 emoji 特殊字符；
• 只在可见文本字符上展现“着重号”；

那么这个成果的代码就是：

<p> 文本内容，<span> 一个 span 元素 </span><em> 是 em&nbsp;&yen;&#67; 元素哦 </em>，啊啊啊……</p>

p {
    width: 320px;
    font-size: 32px;
    -webkit-text-emphasis: '啊' rgba(255, 0, 0, .2);
}
p em {
    font-size: 64px;
    -webkit-text-emphasis-color: blue;
}
p span {
    color: green;
    -webkit-text-emphasis: '🔥';
    -webkit-text-emphasis-position: under;
}

那么这篇内容就到这？不，还有一个货色我想说一下。从下面的效果图中能够看到，“着重号”是在文本上面或者下面的，那么对于一个失常的文本来说，行高（line-height）置信大家不会生疏。那么在有“着重号”的局部，加上 line-height 后会是怎么样的成果呢？

line-height: 20px; 加到 p 中之后，并未看到任何变动；而如果把 20px 换成 60px，有变动了，高度撑开了一丢丢；那再加大点，撑开了，“着重号”紧随着文本隔开了上下行内容。

突发奇想，当 line-height 的值比拟小的时候，并未看到成果，失常状况下，没有 text-emphasis 时，比拟小的 line-height 会让多行内容重叠，就像这样：

可当初有了 text-emphasis 后，并不会重叠了，看来是间接影响了 line-height 最小值的状况，必须保障多行之间的高度值在某个特定值，看着仿佛是 1em 左右的大小，以便于放得下比文字失常 font-size 小一半的，且要与文本内容放弃肯定间距的“着重号”。

回到「冷门的 text-emphasis有什么用呢？」这个话题上。是啊，有什么用呢，除了失常示意某局部的文字内容是着重标记的以外，仿佛也感触不到有什么用了。除非就是咱们反复利用这个“着重号”的个性来玩，尤其是会撑开 line-height，以保障起码有 1em 左右的空间存在于多行之间。那么如果咱们应用一个通明色彩的“着重号”，是不是代表着这部分文字的永远都不会叠加呢？

而后再联合 emoji 或者高低错乱的组合，会不会玩出不一样的天空呢？

回头想想啊，一个好好的“着重号”，还是让它做本人的事件，用来标注文本着重阐明吧，还是不玩了。