今天学习的几个字体css属性-优快云博客

本文介绍了CSS中的font-variant和text-decoration属性的使用方法，并通过实例展示了如何设置小型大写字母和不同类型的文本装饰效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、font-variant，设置或检索对象中的文本是否为小型的大写字母。

默认属性值为normal，为正常的字体

属性值为small-caps，为小型的大写字母字体

下面为一个测试例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> New Document </title> </head> <style type="text/css"> .dv{ font-variant:small-caps; } </style> <body> <div class='dv'> My Name is John! </div> </body> </html>

2、text-decoration属性，用于设置文字的装饰，

默认属性值为none,表示没有装饰；

属性值为underline的时候，文字下面有下划线；

属性值为overline的时候，文字上面面有上划线；

属性值为line-through的时候，文字中间有贯穿线；

下面是一个关于text-decoration的一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> New Document </title> </head> <style type="text/css"> .underlineDv{ border:1px solid red; text-decoration:underline; } .overlineDv{ border:1px solid red; text-decoration:overline; } .lineThroughDv{ border:1px solid red; text-decoration:line-through; } </style> <body> <div class='underlineDv'> 下划线,下划线,下划线,下划线,下划线,下划线 </div> <br /> <div class="lineThroughDv"> 贯穿线,贯穿线,贯穿线,贯穿线,贯穿线,贯穿线, </div> <br /> <div class='overlineDv'> 闪烁,闪烁,闪烁,闪烁,闪烁,闪烁,闪烁,闪烁, </div> </body> </html>