这篇文章主要讲解了“在CSS中怎样给文字添加修饰以做强调”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

在过去，想要对某部分文字进行强调，通常的做法是加粗，或者使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。

text-emphasis 家族总共有4个CSS属性，分别是：

• text-emphasis
• text-emphasis-color
• text-emphasis-style
• text-emphasis-position

其中， 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 | open ] || [ dot | circle | double-circle | triangle | sesame ]
text-emphasis-style: <string>

其中：

text-emphasis-style:none 是默认声明，表示没有任何强调装饰。

text-emphasis-style:<string> 表示使用任意的单个字符作为强调装饰符。例如使用爱心字符：

宝贝，<span class="emphasis">爱你</span>，<span class="emphasis">比心</span>！

.emphasis {
    -webkit-text-emphasis-style: '';
    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:vertical-rl ，此时就可以看到强调装饰符在右侧了，效果如下图所示。

text-emphasis-position 属性在中文场景下还是很常用的，因为，中文习惯在底部设置表示强调的字符，有别于日文、韩文等东亚语言。

因此，中文内容的强调，除了设置强调装饰符以外，还要设置强调装饰符的位置为底部，例如：

.chinese-emphasis {
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
    -webkit-text-emphasis-position: under right;
    text-emphasis-position: under right;
}

这里有个小细节，在Chrome浏览器下， text-emphasis-position 属性可以只设置垂直方向的方位值，无需设置水平方向的方位值，例如下面的语法在Chrome浏览器下也是可以识别的：

-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中怎样给文字添加修饰以做强调”的内容了，经过本文的学习后，相信大家对在CSS中怎样给文字添加修饰以做强调都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS怎样实现三角形和箭头的小图标效果？

  用CSS怎样实现三角形和箭头的小图标效果？在网站设计中，我们经常会需要使用到一些小图片，但是如果网站的图片太多，不仅不好管理，而且还会拖累网站的速度，因此，很多时候我们会使用一些简单的标签样式来实现简单的图形标志来替代图片，这篇给大家分享三角形和箭头的小图标效果的实现。

• 如何用HTML5写个进度环插件，代码是什么

  前几天做了一个进度条的插件。今天我用HTML5的arc做一个简单的进度环的插件。代码演示事实上非常easy的。相同，我们先用一个实例：配置js代码varsetting={id:"canvas",//画布id不可省略raduis:"30",//进度环半径x:90,//进度环圆心x坐标

• HTML中有什么简易方法实现心跳特效，代码怎样写

  生活中我们所见到的大部分图形都可以用css实现，本文介绍了HTML+CSS制作心跳特效的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• CSS中图片文字垂直对齐怎么做，不对齐如何解决

  关于图片垂直居中显示，想必很多写css的人都研究过、或者说是搜寻过方法，下面这篇文章就给大家介绍关于图片与文字垂直方向不对齐问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

• 用CSS怎样做凹面渐变的矩形效果？

  今天给大家分享的是关于用CSS实现凹面渐变的矩形效果的内容，要实现这个效果，有两个难点，一个是凹面矩形实现，另一个给凹面矩形添加渐变的效果，本文有实现代码和详细的介绍供大家参考，感兴趣的朋友接下来跟随小编一起看看吧。