精心点缀的文字:CSS Text Decoration

原创 智云编程 随笔 前端 60阅读 4 天前 举报

大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新的特性。本文将介绍 Level 4 中最新添加的特性。

CSS Text Decoration

文字修饰线:text-decoration-line

text-decoration-line也就是 CSS3 之前的 text-decoration,属性有如下的属性值:

属性值效果
none无效果
underline下划线
overline上划线
line-through删除线
blink文字闪烁
spelling-error展示为浏览器拼写错误的样式
grammar-error展示为浏览器语法错误的样式

特别提醒:

修饰线的粗细:text-decorate-width

该属性主要针对的是 underline, overline, line-through 这三个修饰线样式,设置这些修饰线的粗细,除了直接使用数值表达外,还可以设置为以下的属性:

属性值效果
auto由浏览器决定粗细
from-font如果首个可用字体中含有推荐粗细数值,将会使用,否则行为与 auto 一致

下划修饰线的位置偏移:text-underline-offset

该属性主要控制下划修饰线基于其起始位置的偏移量。而下划线效果的起始位置又由text-underline-position控制,那么我们线简单复习一下这个属性。

text-underline-position

属性值效果
autoimage

|
| under | image

|
| left | image

|
| right | image

|

auto将下划线置于基线位置,而under则置于元素的文字内容之下,left 和 right 则用于竖排排版的文字模式中。

回到text-underline-offset中,下划线的位置首先基于text-underline-position设定的初始位置,然后再加上text-underline-offset设定的数值,除了数值设定外,还支持以下的属性值:

属性值效果
auto由浏览器决定合适的偏移量
from-font如果首个可用字体中含有推荐的偏移数值,将会使用,否则行为与 auto 一致

修饰线效果的连续性

在对文字使用下划线效果时,我们可能经常会发现,下划线会划过字符本身,导致阅读体验不佳,那么text-decoration-skip的出现将会去解决这一类问题。正如属性名的字面意思:该属性用于设定修饰线的省略位置。

text-decorate-skip

该属性用于控制修饰线效果在文本中的什么位置要被跳过,它支持如下的属性值:

属性值效果
none什么也不跳过
objects跳过拥有 display:inline-block效果的元素
spaces跳过所有空格
edges跳过元素边界;

举个例子:<u>奇舞</u><u>周刊</u>,“奇舞” 和 “周刊” 由两个元素进行呈现
那么修饰线效果将在这两个元素的边界断开,由于元素之间的紧密相连的,为了保证效果,浏览器会相应地缩短修饰线的长度保证断开效果。 |

| box-decoration | 跳过盒子的外边距,内边距以及边框区域 |
| leading-spaces | 跳过文字开头的空格、分字符以及letter-spacing和word-spacing效果 |
| trailing-spaces | 和leading-spaces效果相同,只不过做用于文字结尾 |

text-decorate-skip-ink

那么,对于中文汉字来说,原则上是没有基线概念的,当中文与英文同时出现的时候,可能会受到英文字符基线的影响,修饰线效果仍然覆盖掉中文字符,为了解决这个问题,标准中还制定了这个属性很好地解决了此类问题。

该属性只有两个属性值,一个是 auto 一个是 none。当使用 auto 时,修饰线效果必须跳过所有字形绘制的区域。

总结

image

结语

感谢您的观看,如有不足之处,欢迎批评指正。自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复