共计 1351 个字符,预计需要花费 4 分钟才能阅读完成。
我们常常会在网页中对文本某一关键词进行凸显强调,加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法 text-emphasis。
页面文本段落中,有时我们会根据上下文语境对某一关键词进行凸显(如,加粗、高亮、斜体、文本渐变、下划线等等)标记对文本中某一关键词进行装饰,以便引起用户的关注,进而让用户理解段落文本中心意思。
现在我们可以了解一个新的文本强调装饰属性,即:text-emphasis
。
看上去没多大用途,实际项目中可能很少用到,但是,多一份关注,多一份选择嘛,了解一下也无妨。
CSS Emphasis Marks
首先,我们了解下关于这个 Emphasis 标记的属性。
字面上我们可以看出是强调的意思,其读音 [ˈemfəsɪs]。
text-emphasis
是 text-emphasis-style
与text-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 文本强调装饰 示例图
最后,兼容性。
本问示例运行于 Firefox 浏览器,若 chrome 需要加 -webkit- 前缀暂时,更多参考 CANIUSE 查看兼容情况。
测试后,总体来说暂时使用场景或兼容还是有一定局限性,具体根据实际场景而定吧,就当多了个选择,将其储备起来。