当前位置: 首页 > Web前端 > HTML

零基础教你学前端——65、CSS字体样式与样式缩写

时间:2023-04-03 00:40:30 HTML

通过CSS可以设置文字倾斜度、文字粗细、文字大小写等字体样式。font-style属性主要用于指定斜体文本。该属性有3个值:normal,文字正常显示。斜体,文本以斜体显示。倾斜的,非常类似于斜体,但是浏览器支持度低在006文件夹下创建一个font-style.html文件,构建基本代码,添加一个h1元素和三个p元素并添加文本,给三个p元素定义类属性,取值分别为p1、p2、p3。在此文件夹下创建另一个mystyle-2.css文件。定义选择器p.p1并声明样式font-style:normal。定义选择器p.p2并声明样式font-style:italic。定义选择器p.p3并声明样式font-style:oblique。将样式文件导入页面。在浏览器中预览页面,第一段显示正常,另外两段出现歪斜。font-weight属性指定字体的粗细。有两种设置属性值的方法:名称和值。有四名:轻者,瘦身;正常,正常字体;粗体,粗体;更粗,更粗的字体。一共有9个值:100、200、300、400……(停顿)一直到900。这种方法可以更精细地控制文字的粗细,数值越大,文字越粗。数值与名称的对应关系为:100对应打火机;400对应正常;700对应粗体;900对应更粗。定义h1选择器并声明样式font-weight:normal。将声明font-weight:bold添加到p1。将声明font-weight:700添加到p2。将声明font-weight:100添加到p3。看看效果吧,标题h1默认显示为粗体,现在正常显示了。第一段和第二段都加粗了。最后一段被删减了。font-variant属性指定文本是否应以小型大写字母显示。所谓小写字母就是小一号的大写字母。普通大写字母——四行三格占据了前两行,而他只占据了第二行。它有两个值:normal和small-caps,后者表示设置smallcaps。此属性仅对英语有效。将声明font-variant:small-caps添加到p3。看哪,小盘的效果就达到了!为了缩短代码,可以在一个字体属性中指定所有单独的字体属性。font是一个速记属性,其值可以是font-style、font-variant、font-weight、font-size/line-height(读作font-size斜线行高)和font-family值的组合,分隔按空格。其中,font-size和font-family这两个值是必须的。如果缺少其他值,则使用它们的默认值。回到样式代码,在p3中添加两个样式声明:font-size:30px,line-height:30px,font-family:中文仿宋。看一下,第三段应用了6种样式效果:瘦身、斜体、英文小写字母、大小30像素、行高30像素、仿宋字体。让我们尝试使用字体属性重新声明样式。注释掉p3上声明的所有样式。声明字体属性,值为斜百字30px/30px仿宋。效果是一样的!但是样式代码就简单多了。如果我们去掉字体或者字号,比如去掉中文仿宋。所有风格都消失了!如果保留字体大小和字体,请删除其他样式声明。样式仍然有效!文章配套视频链接:https://www.bilibili.com/video...