CSS Emphasis Marks 文本强调标记

这篇文章由 DeathGhost 编辑,发布于

归类于 Css » 👋分享到微博 当前评论 0 条。

我们常常会在网页中对文本某一关键词进行凸显强调,加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法text-emphasis。

页面文本段落中,有时我们会根据上下文语境对某一关键词进行凸显(如,加粗、高亮、斜体、文本渐变、下划线等等)标记对文本中某一关键词进行装饰,以便引起用户的关注,进而让用户理解段落文本中心意思。

现在我们可以了解一个新的文本强调装饰属性,即:text-emphasis

看上去没多大用途,实际项目中可能很少用到,但是,多一份关注,多一份选择嘛,了解一下也无妨。

CSS Emphasis Marks
CSS Emphasis Marks

首先,我们了解下关于这个Emphasis标记的属性。

字面上我们可以看出是强调的意思,其读音 [ˈemfəsɪs]。

text-emphasistext-emphasis-styletext-emphasis-color的缩写。还有一个属性是text-emphasis-position,不在text-emphasis的缩写范围内。即:

p{text-emphasis: '•'orange}
p{text-emphasis-style: '•'; text-emphasis-color: orange;}

两者渲染结果是一样的。

其次,了解下具体属性。

1、text-emphasis-style属性 - 强调标记的样式。

text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

none 初始值,无标记。

[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 关键字装饰

dot • | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅

string 自定义字符装饰。 如一些特殊字符或文本等等。

2、text-emphasis-color属性 - 强调标记颜色

text-emphasis-color: color;

若不设置此属性值,则会根据其元素颜色而定。如:

p{text-emphasis-style: '•'; text-emphasis-position: under right;color:blue;}
// 这里我们移除 text-emphasis-color: orange;属性,则会与文本颜色一致。

3、text-emphasis-position属性 - 强调标记的位置。

text-emphasis-position: [ over | under ] && [ right | left ]

如,强调装饰于文本下方,即:

p{text-emphasis-style: '•'; text-emphasis-color: orange; text-emphasis-position: under right;}
CSS  Emphasis Marks 文本强调装饰 示例图
CSS  Emphasis Marks 文本强调装饰 示例图

最后,兼容性。

本问示例运行于Firefox浏览器,若chrome需要加-webkit-前缀暂时,更多参考CANIUSE查看兼容情况。

测试后,总体来说暂时使用场景或兼容还是有一定局限性,具体根据实际场景而定吧,就当多了个选择,将其储备起来。


CSS Emphasis text-emphasis text-emphasis-style text-emphasis-color text-emphasis-position 强调 标记 装饰

上一篇:

下一篇: