CSS 基础——字体属性

2019-07-1511:41:38 7 387 人看过

我很久以前就有学习前端的打算,各种书籍、网站、硬件都准备好了,却迟迟因为各种忙、各种懒,拖延着没有行动。今天开始读《HTML、CSS、JavaScript 网页制作》,为了保证学习效果,强迫自己简单做了一下笔记。希望今天是一个好的开始!
 

CSS 基础——字体属性

 

字体属性

 

1、字体 font-family

在 HTML 中,设置文字的字体属性需要通过<font> 标记中的font属性,而在 CSS 中则使用font-family属性。

语法:

font-family: "字体","字体",…

说明:

如果在font-family属性中定义了多种字体,在浏览器中浏览时会由前向后选择字体,即当浏览器不支持“字体 1”时,则会采用“字体 2”;如果不支持“字体 1”和“字体 2”,即采用“字体 3”,以此类推。如果浏览器不支持font-family属性定义中的所有字体,则会采用系统默认的字体。

举例

.h {
    font-family: "宋体";
}

 

2、字号 font-size

在 HTML 中,字体的大小是由<font>标记中的size属性来控制的。在 CSS 里可以使用font-size属性来自由控制字体的大小。

语法:

font-size: 大小的取值

说明:

font-size 的取值范围如下:

font-size: xx-small; /*绝对字体尺寸,最小*/
font-size: x-small; /*绝对字体尺寸,较小*/
font-size: small; /*绝对字体尺寸,小*/
font-size: medium; /*绝对字体尺寸,正常默认值*/
font-size: large; /*绝对字体尺寸,大*/
font-size: x-large; /*绝对字体尺寸,较大*/
font-size: xx0large; /*绝对字体尺寸,最大*/
font-size: larger; /*相对字体尺寸,相对于父对象中字体尺寸进行相对增大*/
font-size: smaller; /*相对字体尺寸, 相对于父对象中字体尺寸进行相对减小*/
font-size: 16px; /*绝对字体尺寸,使用像素值定义字体大小*/

举例:

.h {
    font-family: "宋体";
    font-size: "16px";
}

 

3、字体风格 font-style

字体风格font-style属性用来设置字体是否为斜体。

语法:

font-style: 样式的取值

说明:

样式的取值有 3 种:normal是默认的正常字体;italic以斜体显示文字;oblique属于中间状态,以偏斜体显示。

举例:

.h {
    font-family: "宋体";
    font-size: 16px;
    font-style: italic;
}

 

4、加粗字体 font-weight

在 HTML 里使用<b>标记设置文字为粗体显示,而在 CSS 种利用font-weight属性来设置字体的粗细。

语法:

font-weight: 字体粗细值

说明:

font-weight 的取值范围包括normalboldbolderlighternumber。其中normal表示正常粗细;bold表示粗体;lighter表示特细体;number不是真正的取值,其范围是 100~900,一般情况下都是整百的数字,如 200、300 等。

举例:

.h {
    font-family: "宋体";
    font-size: 16px;
    font-weight: bold;
}

 

5、小写字母转为大写 font-variant

使用font-variant属性可以将小写的英文字母转化为大写。

语法:

font-variant: 取值

说明:

在 font-variant 属性种,可以设置的值只有两个,一个是 normal,表示正常显示,另一个是 small-caps,它能将小写的英文字母转化为大写字母且字体较小。

举例:

.h {
    font-family: "宋体";
    font-size: 16px;
    font-variant: small-caps;
}

 

6、字体复合属性

可以设置 font 的符合属性,用来简化 CSS 代码。

语法:

font: 字体的取值

说明:

复合属性可以取值字体族科、字体大小、字体风格、加粗字体等,各值之间用空格相连。

举例:

.h {font: bold italic "宋体"}

 
 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  4   博主  3

    • avatar 阿明 1

      博客不错,蛮养眼的。

        • avatar Action Admin

          @阿明 谢谢。

        • avatar 张波博客 4

          你一更新我就来学习,看看能不能成为高手

          • avatar Jane博客 3

            基础的东西最实用!

              • avatar Action Admin

                @Jane博客 嗯嗯,虽然基础,学好了感觉能用得上。

              • avatar 阿辉技术创意园 0

                正好需要这个,谢谢分享