阅读模式:

CSS font-size字体

阅读量:8  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:font字体目标:能够使用字体和文本相关样式修改元素外观样式字体大小属性名:front-size取值:数字+px注意点:谷歌浏览器的默认值是16px,单位需要设置,否则是无效的。<style> p{......

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>
分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: