欢迎光临
我的个人博客网站

CSS font-size字体


font字体

目标:能够使用字体和文本相关样式修改元素外观样式

字体大小

属性名:front-size

取值:数字+px

注意点:谷歌浏览器的默认值是16px,单位需要设置,否则是无效的。

<style>         p{             font-size: 30px;         }     </style> </head> <body>     <p>今天也有努力呦!!!</p> </body> 

字体粗细

属性名:font-weight

取值:

关键字取值:

正常 normal
加粗 bold

纯数字取值:100~900的整百数

正常 400
加粗 700

注意点:

不是所有字体都提供了9中粗细,因此部分取值页面中无变化

在实际开发中,以正常,加粗两种取值使用的最多。

 <style>         p{           font-weight: bold;         }         .weight{//复习类选择器的使用             font-size: 700;         }     </style> </head> <body>     <p>今天也有努力呦!!!</p>     <p class="weight">嗯嗯,努力了呀!</p> </body> 

字体样式

属性名:font-style

取值:

正常(默认值):normal

倾斜:italic

<style>         #style{  //复习id选择器的使用             font-style: italic;         }     </style> </head> <body>     <p id="style">明天也要加油呦!</p> </body> 

常见的字体系列

1、无衬线字体(sans-serif)

特点 文字笔画粗细均匀,并且首位无装饰
场景 网页中大多采用无衬线字体
常见的该系列 黑体、Arial

2、衬线字体

特点 文字笔画粗细不均匀,并且首尾有笔锋装饰
场景 报刊书籍中
常见的该系列 宋体、The New Roman

3、等宽字体

特点 每个字母或者文字的宽度相等
场景 一般用于代码编写,有利于代码的阅读
常见的该系列 Consolas、fira code

字体系列font-family

属性名:font-family

常见取值:具体字体1,具体字体2,具体字体3……字体系列

渲染规则:从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体。如果都不支持,会根据OS,显示最后字体系列的默认字样。

注意点:

1、如果字体名称中存在多个单词,推荐使用引号包裹

2、最后一项字体不需要使用引号包裹

3、网页开发时,尽量使用系统自带常见字体,保证不同用户浏览网页都可以正确显示。

样式的层叠问题

假如给同一个p标签设置了两个颜色的属性,那么写在最后的会把前面的覆盖掉

<style>         p{          color: blue;          color: red;//实际上执行这个红色         }     </style> </head> <body>     <p>明天也要加油呦!</p> </body> 

字体样式的连写

属性名:font

取值:font:style,weight,size,family

顺序要求:可以是swsf

省略要求:只能省略前面两个,如果省略相当于设置了默认值

注意点:

如果需要同时设置单独和连写的形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面(否则就相当于给同一个标签设置了两个相同属性。导致上面的被覆盖掉,所以写在下面。)

<style>         p{          font: italic 700 300px 楷体,宋体,隶书,sans-serif;         }     </style> </head> <body>     <p>明天也要加油呦!</p> </body> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS font-size字体
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏