使用CSS text-emphasis对文字进行强调装饰的实现代码
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
一、引言
在过去,想要对某部分文字进行强调,通常的做法是加粗,或者使用一个高亮的颜色,现在有了新的选择,就是使用 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类:
1 2 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>
表示使用任意的单个字符作为强调装饰符。例如使用爱心字符:
效果如下图所示,可以看到对应的文字上面出现了爱心字符(因为应用了Emoji字体,所以呈现的是Emoji字符)。
这里有几个细节和大家讲下:
显示的强调装饰符的字号是主文字内容字号的一半,例如假设文字是 16px
大小,则上方的强调字符的大小则是 8px
。因此,如果文字字号不是很大的时候,尽量不要使用造型复杂,字符区域较小的字符,例如星号“*”,井号“#”等,因为在普通的显示设备中会缩成一团,用户完全看不出来是什么字符。 如果行高不是很高,则强调装饰符会自动增加当前这一行所占据的高度。 强调装饰符和正文之间的距离是无法通过设置行高等属性进行调节的,距离的大小主要由字体决定。
如果指定的是多个字符,则只会使用第1个字符作为强调装饰符。例如:
等同于:
最后看下 text-emphasis-style
内置的几个装饰符效果,他们是 dot
(点)、 circle
(圆)、 double-circle
(双层圆)、 triangle
(三角)、 sesame
(芝麻点)。
每一种装饰符都有实心和空心两种字符,是通过 filled
和 open
这两个关键字决定的。
例如:
由于内置字符默认都是使用实心的,因此, text-emphasis:filled dot
的效果等同于 text-emphasis:dot
。
如果 text-emphasis-style
的属性值只有 filled
或 open
,则会采用 dot
(点)作为强调装饰符。例如:
1 2 3 4 | /* 等同于text-emphasis: filled dot */ text-emphasis: filled; /* 等同于text-emphasis: open dot */ text-emphasis: open; |
至于各个装饰符具体的效果,我 (张鑫旭) 特意制作了一个表方便大家常看,详见下表。
各个强调装饰符的字形大小受字体影响较大,大家根据实际场景选择使用合适的强调装饰符。
3. text-emphasis-position
text-emphasis-position
属性用来指定强调装饰符的位置,默认位置是在正文的上方,我们可以指定强调装饰符在正文的下方,也可以指定垂直排版的时候强调装饰符是左侧还是右侧。
语法如下:
使用示意:
1 2 3 4 5 6 7 | 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
属性在中文场景下还是很常用的,因为,中文习惯在底部设置表示强调的字符,有别于日文、韩文等东亚语言。
因此,中文内容的强调,除了设置强调装饰符以外,还要设置强调装饰符的位置为底部,例如:
1 2 3 4 5 6 | .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浏览器下也是可以识别的:
但是,请注意,Chrome浏览器的这个做法其实是不对的,是个规范的描述不相符合的,规范中要求 text-emphasis-position
属性值需要同时包含水平方位和垂直方位,因此,建议大家还是2个值同时设置。
4. text-emphasis
text-emphasis
是 text-emphasis-color
和 text-emphasis-style
这两个CSS属性的缩写,使用示意:
就语法和语义而言, 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的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
- 本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
- 在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29
- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论