文字的尺寸、字体、行距及颜色
4174字,阅读需时14分钟
来自专栏
课程/专栏

文字的尺寸、字体、行距及颜色样式标签为font-size(尺寸)、font-family(字体)、line-height(行距)、color(颜色)。

font-size(尺寸)

font-size样式用于设置文字大小,单位有px(像素)、 em(相对值,以父元素的大小为基准单位)、rem(相对值,以根元素的大小为基准单位)。

px的英文全称是Pixels,中文名称为像素,手机屏幕的分辨率就是以像素为单位的,因此它是一个物理单位。使用px为单位的样式会随着显示设备分辨率的不同而发生大小变化。例如,font-size在PC网页中被设置为16px,在手机端显示该网页时,文字会显示的比较大,因为PC屏幕的分辨率一般都大于手机屏幕的分辨率。

em是一个相对单位,主要是相对于父元素的font-size。假设当前元素的父元素的font-size设置为16px,如果当前元素的font-size设置为1.2em,则当前元素的font-size实际值为16*1.2=19.2px;如果当前元素的font-size设置为0.65em,则当前元素的font-size实际值为16*0.65=10.4px。需要注意的是,如果当前元素以px为单位设置了font-size的值,则其它采用em单位的样式,都会以当前font-size的值为基准单位。

rem同em一样都是相对单位,区别是em以父元素的font-size为基准单位,rem以网页根元素的font-size为基准单位,也就是浏览器的默认字体尺寸,浏览器的默认字体尺寸是16px。

下面的网页文档展示了font-size采用不同单位的应用。

<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-size:12px;">
<p style=" font-size:1.5em; font-family:微软雅黑; font-weight:bolder;">送杜少府之任蜀州</p>
<p>作者:王勃</p>
<p style="font-size:1.2rem; margin-top:30px;">城阙辅三秦,风烟望五津。</p>
<p style="font-size:1.2em; ">与君离别意,同是宦游人。</p>
<p style="font-size:0.5em; ">海内存知己,天涯若比邻。</p>
<p style="font-size:1.0rem; ">无为在歧路,儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中。城阙辅三秦语句的font-size被设置为1.2rem,rem以浏览器默认的字体尺寸为基准单位,因此其font-size的实际值为1.2 * 16 = 19.2px;与君离别意语句的font-size被设置为1.2em,em以父元素的字体尺寸为基准单位,该元素的父元素为body元素,因此其font-size的实际值为1.2*12=14.4px。浏览器显示效果如下图所示。

image.png

font-family(字体)

font-family用于设置文字采用何种字体进行显示。使用该样式设置字体时,建议使用操作系统常见的内置中文字体。Windows操作系统常见的内置中文字体有宋体(SimSun)、黑体(SimHei)、微软雅黑(Microsoft Yahei)、楷体(KaiTi)、仿宋(FangSong)。其中,宋体是中文字体名称,SimSun是英文字体名称。在CSS样式中,中文字体名称和英文字体名称都可以使用。下面的CSS样式语句设置了文章标题使用黑体字体、文章正文使用宋体。

.title{font-family:黑体;}
.paragraph{font-family:SimSun;}

如果浏览器所在的操作系统没有安装CSS样式设置的字体时,浏览器会使用操作系统的默认字体进行替换。

line-height(行距)

line-height样式用于设置文字段落的行距,line-height的单位有px、em、rem、百分比。百分比按照当前font-size的尺寸进行计算。下面的网页文档展示了line-height样式的使用。

<html>
<head>
      <title>行距的使用</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
       <h2>本段采用默认行距</h2>
      <hr>
     <div>
本文语言浅显,但所说明的道理深刻,富有教育意义。在引导学生理解课文所说明的做人道理的问题上,教师要注意三点:一要保证学生个体进行充分阅读、思考和小组进行交流讨论的时间。以学生的自读自悟为基础,教师作适当点拨,引导学生由内容到思想,由花生的生长特点到花生的品格,由花生的品格到做人的道理,逐步加深理解,切忌教师一厢情愿地说教。二要注重引导学生联系生活中的所见所闻所感,把花生的品格与做人的道理联系起来,突破本课教学难点,要对作者的立意有所了解,取得认同。三要尊重学生的不同体验,允许他们从不同的角度去体会,用不同方式表述自己的见解。
     </div>
     <p></p>
       <h2>本段采用自定义行距</h2>
      <hr>
     <div style="line-height:180%">
本文语言浅显,但所说明的道理深刻,富有教育意义。在引导学生理解课文所说明的做人道理的问题上,教师要注意三点:一要保证学生个体进行充分阅读、思考和小组进行交流讨论的时间。以学生的自读自悟为基础,教师作适当点拨,引导学生由内容到思想,由花生的生长特点到花生的品格,由花生的品格到做人的道理,逐步加深理解,切忌教师一厢情愿地说教。二要注重引导学生联系生活中的所见所闻所感,把花生的品格与做人的道理联系起来,突破本课教学难点,要对作者的立意有所了解,取得认同。三要尊重学生的不同体验,允许他们从不同的角度去体会,用不同方式表述自己的见解。
     </div>
</boyd>
<html>

在上面的网页代码中。第一个div元素使用默认行距,默认行距与浏览器有关且与默认字体尺寸相关;第二个div元素使用设置的行距,单位为百分比,值为180%。需要注意的是,行距不是行间距,而是文字内容区域高度与行间距的和。下图是浏览器的显示效果。

 image.png

color(颜色)

color样式用于设置文字的颜色,颜色模式为RGB。颜色值为表示RGB颜色值的十六进制数值,也可以用rgb函数进行设置。

设置title样式的颜色为红色。

.title{color:#ff0000;}
.title{color:rgb(255,0,0);}

下面的HTML文档展示了color样式的使用方法。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center;">
<p style="color:#ff0000;">送杜少府之任蜀州</p>
<p>作者:王勃</p>
<p style="color:#00ff00;">城阙辅三秦,风烟望五津。</p>
<p style="color:rgb(0,0,255); ">与君离别意,同是宦游人。</p>
<p style="color:#393939;">海内存知己,天涯若比邻。</p>
<p style="color:#898989; ">无为在歧路,儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中。城阙辅三秦语句被设置为红色,颜色值为#00ff00;与君离别意语句使用rgb函数设置颜色值,传入的三个参数分别为R的颜色值、G的颜色值和B的颜色值。下图是浏览器显示效果。

 image.png

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

手机、电脑同步学

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

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