如何注册网站域名,淘客app,滨海专业做网站,提高网站权重的方法文章目录 #x1f431;#x1f409;一、字体样式的基本概念#xff1a;#x1f431;#x1f409;二、css字体样式属性有#xff1a;#x1f923;1、设置字体类型#xff08;font-family#xff09;#x1f923;2、设置字体大小#xff08;font-size#xff09;… 文章目录 一、字体样式的基本概念二、css字体样式属性有1、设置字体类型font-family2、设置字体大小font-size3、设置字体风格font-style4、设置字体的粗细font-weight5、综合设置字体样式font 三、总结 一、字体样式的基本概念
在 HTML 中字体样式是指文本的字体、大小、颜色和样式等属性的组合。可以通过 CSS 或者 HTML 元素属性来设置字体样式。可以通过以下方式来设置字体样式
二、css字体样式属性有
1、设置字体类型font-family
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体则会尝试下一个。也就是说font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{font-family: 隶书;}/style
/head
body
div第一个div/div
/body
/html运行结果
2、设置字体大小font-size
font-size属性用于设置字号该属性的值可以使用相对长度单位也可以使用绝对长度单位。
其中相对长度单位比较常用推荐使用像素单位px绝对长度单位使用较少。具体如下
相对长度单位说明em相对于当前对象内文本的字体尺寸px像素最常用推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.yiDiv{font-size: 20px;}.erDiv{font-size: 2em;}/style
/head
body
div classyiDiv第一个div/div
div classerDiv第二个div/div
/body
/html运行结果 3、设置字体风格font-style
字体倾斜除了用 i 和 em 标签之外可以使用CSS 来实现。
font-style属性用于定义字体风格如设置斜体、倾斜或正常字体其可用属性值如下
normal默认值浏览器会显示标准的字体样式。
italic浏览器会显示斜体的字体样式。
oblique浏览器会显示倾斜的字体样式。
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.yiDiv{font-style: italic;}.erDiv{font-style: oblique;}/style
/head
body
div classyiDiv第一个div/div
div classerDiv第二个div/div
/body
/html运行结果 4、设置字体的粗细font-weight
字体加粗除了用 b 和 strong 标签之外可以使用CSS 来实现但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细其可用属性值normal、bold、bolder、lighter、100~900(100的整数倍)。
技巧
数字 400 等价于 normal而 700 等价于 bold。
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.yiDiv{font-weight: 1000;}.erDiv{font-weight: lighter;}/style
/head
body
div classyiDiv第一个div/div
div classerDiv第二个div/div
/body
/html运行结果 5、综合设置字体样式font
font属性用于对字体样式进行综合设置其基本语法格式如下选择器{字体风格→字体粗细→字体大小→字体类型 } 使用font属性时必须按上面语法格式中的顺序书写不能更换顺序各个属性以空格隔开。 注意其中不需要设置的属性可以省略(取默认值)但必须保留font-size和font-family属性否则font属性将不起作用。
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{font: oblique bold 2em 楷体;}/style
/head
body
div第一个div/div/body
/html运行结果 三、总结
以上就是有关常用字体样式的笔记内容希望对各位有所帮助作者也在学习中如有解释不清楚或有误的地方还请各位指正。
