关于前端:零基础教你学前端65CSS字体风格和样式简写

36次阅读

共计 1449 个字符,预计需要花费 4 分钟才能阅读完成。

通过 CSS 能够设置文本歪斜、文本粗细以及文本大小写等字体格调。

font-style 属性次要用于指定斜体文本。

这个属性有三个值:

normal,文本失常显示。

italic,文本斜体显示。

oblique,和 italic 十分类似,但浏览器反对度较低

在 006 文件夹下创立一个 font-style.html 文件,构建根本代码,增加一个 h1 元素和三个 p 元素并增加文本,给三个 p 元素定义 class 属性,值别离为 p1、p2、p3。

在这个文件夹下再创立一个 mystyle-2.css 文件。定义选择器 p.p1,申明款式 font-style: normal。定义选择器 p.p2,申明款式 font-style: italic。定义选择器 p.p3,申明款式 font-style: oblique。

在页面里引入款式文件。

在浏览器里预览页面,第一个段落失常显示,另外两个段落歪斜了。

font-weight 属性指定了一个字体的粗细。属性值设置有两种形式:名称和数值。

名称有四个:lighter,细体;normal,失常字体;bold,加粗字体;bolder,更粗字体。

数值有 9 个:100,200,300,400,… (进展一下) 始终到 900。这种形式更能精细化的管制文本的粗细,值越大,文本越粗。

数值和名称的对应关系是:100 对应 lighter;400 对应 normal;700 对应 bold;900 对应 bolder。

定义 h1 选择器,申明款式 font-weight: normal。

给 p1 增加申明 font-weight: bold。

给 p2 增加申明 font-weight: 700。

给 p3 增加申明 font-weight: 100。

咱们看成果,题目 h1 默认是粗体显示,当初失常显示了。第一个段落和第二个段落都加粗了。最初一个段落变细了。

font-variant 属性指定了文本,是否应以小型大写字符显示。所谓小型大写字母,就是小一号的大写字母,失常的大写字母——四线三格里占据前两行,而他只占用第二行。它有两个值:normal 和 small-caps,后者示意设置小型大写字母。这个属性只对英文无效。

给 p3 增加申明 font-variant: small-caps。

咱们看,小型大写字母的成果实现了!

为了缩短代码,能够在一个 font 属性中指定所有独自的字体属性。

font 是一个简写属性,它的值能够是 font-style、font-variant、font-weight、font-size/line-height(读作 font-size 斜线 line-height)、font-family 组合在一起的值,两头用空格离开。

其中,font-size 和 font-family 这两个值是必须的。其余值短少的话,应用他们的默认值。

回到款式代码,给 p3 增加两个款式申明 font-size: 30px,line-height: 30px,font-family: 华文仿宋。

咱们看,第三个段落利用了 6 个款式成果:细体、歪斜、英文小型大写、30 像素大小、行高 30 像素、字体为华文仿宋。

咱们试着用 font 属性,从新申明一下款式。正文掉所有在 p3 上申明的款式。

申明 font 属性,值为 oblique 100 small-caps 30px/30px 华文仿宋。

成果是一样的!然而款式的代码简洁了许多。

如果咱们去掉字体或者字号,比方去掉华文仿宋。

款式全副生效了!

如果保留字号和字体,删除其余款式申明。

款式还是无效的!

文章配套视频链接:https://www.bilibili.com/vide…

正文完
 0