文字的尺寸、字体、行距及颜色样式标签为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采用不同单位的应用。
在上面的网页代码中。城阙辅三秦语句的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。浏览器显示效果如下图所示。
font-family(字体)
font-family用于设置文字采用何种字体进行显示。使用该样式设置字体时,建议使用操作系统常见的内置中文字体。Windows操作系统常见的内置中文字体有宋体(SimSun)、黑体(SimHei)、微软雅黑(Microsoft Yahei)、楷体(KaiTi)、仿宋(FangSong)。其中,宋体是中文字体名称,SimSun是英文字体名称。在CSS样式中,中文字体名称和英文字体名称都可以使用。下面的CSS样式语句设置了文章标题使用黑体字体、文章正文使用宋体。
如果浏览器所在的操作系统没有安装CSS样式设置的字体时,浏览器会使用操作系统的默认字体进行替换。
line-height(行距)
line-height样式用于设置文字段落的行距,line-height的单位有px、em、rem、百分比。百分比按照当前font-size的尺寸进行计算。下面的网页文档展示了line-height样式的使用。
在上面的网页代码中。第一个div元素使用默认行距,默认行距与浏览器有关且与默认字体尺寸相关;第二个div元素使用设置的行距,单位为百分比,值为180%。需要注意的是,行距不是行间距,而是文字内容区域高度与行间距的和。下图是浏览器的显示效果。
color(颜色)
color样式用于设置文字的颜色,颜色模式为RGB。颜色值为表示RGB颜色值的十六进制数值,也可以用rgb函数进行设置。
设置title样式的颜色为红色。
下面的HTML文档展示了color样式的使用方法。
在上面的网页代码中。城阙辅三秦语句被设置为红色,颜色值为#00ff00;与君离别意语句使用rgb函数设置颜色值,传入的三个参数分别为R的颜色值、G的颜色值和B的颜色值。下图是浏览器显示效果。
举报/反馈