👻 DeathGhost

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查看兼容情况。

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

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕