一、引言
在过去，想要对某部分文字进行强调，通常的做法是 加粗 ， 或者 使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。
text-emphasis 家族总共有4个CSS属性，分别是：
text-emphasis text-emphasis-color text-emphasis -s tyle text-emphasis-pos IT ion其中， text-emphasis 是 text-emphasis-color 和 text-emphasis-style 这两个CSS属性的缩写，注意，并不包含 text-emphasis-position 属性， text-emphasis-position 属性是独立的。
二、详细
1. text-emphasis-color
text-emphasis-color 属性没什么好说的，表示用来强调的字符的颜色，初始值就是当前文字的颜色。
2. text-emphasis-style
text-emphasis-style 语法主要有下面3类：
text-emphasis-style: none text-emphasis-style: [ filled | o PE n ] || [ dot | circle | do ub le-circle | triangle | ses am e ] text-emphasis-style: <string>
其中：
text-emphasis-style:none 是默认声明，表示没有任何强调装饰。
text-emphasis-style:<string> 表示使用任意的单个字符作为强调装饰符。例如使用爱心字符：
宝贝 ，<span class="emphasis">爱你</span>，<span class="emphasis">比心</span>！
.emphasis {
- webkit -t ext-emphasis-style: '& # 10084;';
text-emphasis-style: '❤';
}
效果如下图所示，可以看到对应的文字上面出现了爱心字符（因为应用了Emoji字体，所以呈现的是Emoji字符）。
这里有几个 细节 和大家讲下：
显示的强调装饰符的 字号 是主文字内容字号的一 半 ，例如假设文字是 16px 大小，则上方的强调字符的大小则是 8px 。因此，如果文字字号不是很大的时候，尽量不要使用造型复杂，字符区域较小的字符，例如星号[*]，井号[#]等，因为在普通的显示设备中会缩成一团，用户完全看不出来 是什么 字符。 如果行高不是很高，则强调装饰符会自动增加当前这一行所占据的高度。 强调装饰符和正文之间的 距离 是无法通过设置行高等属性进行 调节 的，距离的大小主要由字体决定。
如果指定的是多个字符，则只会使用第1个字符作为强调装饰符。例如：
text-emphasis-style: 'CSS新世界';
等同于：
text-emphasis-style: 'C';
最后看下 text-emphasis-style 内置的几个装饰符效果，他们是 dot （点）、 circle （ 圆 ）、 double-circle （双层圆）、 triangle （三 角）、 sesame （芝麻点）。
每一种装饰符都有实心和空心两种字符，是通过 filled 和 open 这两个关键字决定的。
例如：
/* 实心的圆点 */ text-emphasis: filled dot; /* 空心的圆点 */ text-emphasis: open dot;
由于内置字符默认都是使用实心的，因此， text-emphasis:filled dot 的效果等同于 text-emphasis:dot 。
如果 text-emphasis-style 的属性值只有 filled 或 open ，则会采用 dot （点）作为强调装饰符。例如：
/* 等同于text-emphasis: filled dot */ text-emphasis: filled; /* 等同于text-emphasis: open dot */ text-emphasis: open;
至于各个装饰符具体的效果，我 （张鑫旭） 特意 制作 了一个表方便大家常看，详见下表。
各个强调装饰符的字形大小受字体影响 较大 ，大家根据实际场景选择使用合适的强调装饰符。
3. text-emphasis-position
text-emphasis-position 属性用来指定强调装饰符的位置，默认位置是在正文的上方，我们可以指定强调装饰符在正文的下方，也可以指定垂直排版的时候强调装饰符是左侧还是右侧。
语法如下：
text-emphasis-position: [ over | under ] && [ right | left ]
使用示意：
text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under;
text-emphasis-position 的初始值是 over right 。 right 定位出现在文字垂直排版的时候，例如设置 writing-mode:vert ical -rl ，此时就可以看到强调装饰符在右侧了，效果如下图所示。
text-emphasis-position 属性在中文场景下还是很常用的，因为，中文习惯在底部设置表示强调的字符，有别于日文、韩文等东亚语言。
因此，中文内容的强调，除了设置强调装饰符以外，还要设置强调装饰符的位置为底部，例如：
.chinese-emphasis {
-webkit-text-emphasis: dot;
text-emphasis: dot;
-webkit-text-emphasis-position: under right;
text-emphasis-position: under right;
}
这里有个小细节，在Ch rom e浏览器下， text-emphasis-position 属性可以只设置垂直 方向 的方位值，无需设置水 平方 向的方位值，例如下面的语法在C hr ome浏览器下也是可以识别的：
-webkit-text-emphasis-position: under;
但是，请注意，Chrome浏览器的这个做法其实是不对的，是个规范的描述不相符合的，规范中要求 text-emphasis-position 属性值需要同时包含水平方位和垂直方位，因此，建议大家还是2个值同时设置。
-webkit-text-emphasis-position: under right;
4. text-emphasis
text-emphasis 是 text-emphasis-color 和 text-emphasis-style 这两个CSS属性的缩写，使用示意：
text-emphasis: circle deepskyblue;
就语法和语义而言， text-emphasis 属性比较单纯，没有隐藏细节。
唯一值得一提的是 text-emphasis 是一个继承属性，也就是祖先元素设置了强调效果，子元素也会应用。这 一点 就和 text-decoration 属性完全不同， text-decoration 属性 是没有继承性的。
另外一点小区别是， text-emphasis 属性会影响文字占据的高度，而 text-decoration 属性不会。
三、小结
我回顾了下我所 经历 的这些项目，使用 text-emphasis 属性的地方，也就是JS API或者技 术 文档一些需要强调的文本之处了，还有 公司 产品对外的帮助文档之类。而普通的内容展示，似乎没有这样的需求。
总之，CSS text-emphasis 属性给了我们文字内容强调一个新的选择。
最后，展示下 text-emphasis 属性的浏览器兼容性，如下图：
总结
到此这篇关于使用CSS text-emphasis对文字进行强调装饰的 文章 就介绍到这了,更多相关css text-emphasis文字修饰内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 使用CSS text-emphasis对文字进行强调装饰的实现代码 全部内容，希望文章能够帮你解决 使用CSS text-emphasis对文字进行强调装饰的实现代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用CSS text-emphasis对文字进行强调装饰的实现代码的详细内容...