文字粗细、风格及修饰样式
3585字,阅读需时12分钟
来自专栏
课程/专栏

文字粗细、风格和修饰样式的标签分别是font-weight(粗细)、font-style(字体风格)和text-decoration(文字装饰)。

font-weight(尺寸)

font-weight样式用于设置文字的粗细,文字通过粗细之分,可以起到对部分文字强调的作用。font-weight样式值的设置有三种方式:一种是关键字设置法,关键字有normal和bold,normal是正常,bold是加粗;一种是相对粗细值法,相对粗细值法也采用关键字进行设置,关键字有lighter和bolder,lighter相对于父元素设置的文字要细一些,bolder相对于父元素设置的文字要粗一些;再一种是数值法,CSS提供了从100到900的9个数值,这9个数值只能是100的整数倍,文字粗细从100(最细)到900(最粗)。下面的HTML文档展示了font-weight的使用方法。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center; margin-top:20px;font-weight:800;">
<p style=" font-size:22px; font-weight:bolder;">送杜少府之任蜀州</p>
<p>作者:王勃</p>
<p style="font-size:18px; margin-top:30px;font-weight:lighter">城阙辅三秦,风烟望五津。</p>
<p style="font-size:18px;font-weight:bolder">与君离别意,同是宦游人。</p>
<p style="font-size:18px; font-weight:normal">海内存知己,天涯若比邻。</p>
<p style="font-size:18px;font-weight:100 ">无为在歧路,儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中,body元素的font-weight被设置为数值800,p元素的font-weight被设置为lighter的要比800细一些,p元素的font-weight被设置为bolder的要比800粗一些。浏览器显示效果如下图所示。

 image.png

font-style(字体风格)

font-style样式用于设置字体的风格,字体的风格主要分为正常体和斜体。在文字排版中斜体主要应用于引用、强调、唤起注意的作用。font-style样式值的设置采用关键字设置法,关键字有normal、italic、oblique、inherit。

normal用于设置正常字体风格;italic用于设置字体斜体风格;oblique用于设置文字倾斜,oblique与italic的区别是italic只能用于自身有倾斜风格的字体,对于没有倾斜风格的字体,italic不起任何作用。oblique用于文字倾斜,不管采用的字体有没有倾斜风格,都会让元素内的文字倾斜;inherit用于设置从父元素继承字体风格样式。下面的HTML文档展示了font-style的使用。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center; margin-top:20px;font-style:italic">
<p style=" font-size:22px; font-weight:bolder;">送杜少府之任蜀州</p>
<p>作者:王勃</p>
<p style="font-size:18px; margin-top:30px;font-style:normal">城阙辅三秦,风烟望五津。</p>
<p style="font-size:18px;font-style:italic">与君离别意,同是宦游人。</p>
<p style="font-size:18px; font-style:oblique">海内存知己,天涯若比邻。</p>
<p style="font-size:18px;font-style:inherit ">无为在歧路,儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中,body元素的font-style被设置为斜体风格,其所有子元素如果没有单独设置font-style,将全部采用斜体风格。下图是浏览器显示效果。

image.png

text-decoration(文字修饰)

text-decoration样式用于修饰文字内容,可以实现在文字上添加下划线、在文字之间穿过一条线、在文字上方添加一条线。text-decoration样式值的设置采用关键字设置法,关键字有none、underline、overline、line-through、inherit。

none是默认样式,文字不加任何修饰;underline用于设置在文字下面画一条线;overline用于设置在文字上面画一条线;line-through用于设置在文字中间穿过一条线;inherit用于继承父元素的样式。下面的HTML文档展示了text-decoration的用法。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center; margin-top:20px;">
<p style=" font-size:22px; font-weight:bolder;">送杜少府之任蜀州</p>
<p>作者:王勃</p>
<p style="font-size:18px; margin-top:30px;text-decoration:underline">城阙辅三秦,风烟望五津。</p>
<p style="font-size:18px;text-decoration:overline">与君离别意,同是宦游人。</p>
<p style="font-size:18px; text-decoration:line-through">海内存知己,天涯若比邻。</p>
<p style="font-size:18px;text-decoration:none">无为在歧路,儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中,对p元素的文本内容添加了下划线、上划线、中间线修饰样式。下图是浏览器显示效果。

image.png

 

 

 

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有