CSS学习笔记 10.字体

Snoopydate

已于 2022-03-22 18:05:25 修改

阅读量373

点赞数

文章标签： css css3 学习前端

于 2022-03-20 18:27:13 首次发布

本文链接：https://blog.csdn.net/qq_55853408/article/details/123494348

版权

一、字体族

字体相关的样式
color用来设置字体颜色
font-size设置字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem相对于根元素的一个font-size

font-family字体族（字体的格式)
可选值:
serif 衬线字体（）
在这里插入图片描述

sans-serif 非衬线字体
在这里插入图片描述
monospace 等宽字体
它指的是字符宽度相同的一类字体。

<style>
    p{
        font-size: 20px;
        color: orange;
       font-family: monospace; 
    }
</style>

在这里插入图片描述

指定字体的类别,浏览器会自动使用该类别下的字体

font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推
代码如

<style>
    p{
        font-size: 20px;
        color: orange;
       font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
</style>

除了font-famliy字体常见可选值微软雅黑宋体等等
我们还可以自己去下载别的字体写入文件中再进行引用
需要在style中写入@font-face
它可以将服务器中的字体直接提供给用户使用
代码如下

<style>
@font-face {
    font-family: 'sss';/* 起名字 '' 里面写你想使用字体的名字*/
    src: url('./');/* ./ 后面写文件路径 */
}
 p{
        font-size: 20px;
        color: orange;
       font-family:'sss';/*使用自己命名的字体*/
    }
</style>

@font-face存在一定的问题
1.加载速度由于要引用外部文件所以第一次加载速度可能偏慢点
2.版权下载别处的字体要注意原作者版权问题

二、图标字体

图标字体（iconfont)
在网页中经常需要使用一些图标,可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活

所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标

如图
在这里插入图片描述

推荐下载网站 font-awesome 网页中有教程
https://fontawesome.dashgame.com/#spinning
在这里插入图片描述

class前缀要么是fas 要么是fab 如果使用fas乱码了就改成fab
即可引用

三、行高

行高是单行文字实际占据的高度
（这里并不是指设置的文字多高行高就有多高）
在这里插入图片描述
如图给50px高的字体设置了一个边框可以明显的看出边框内不止50px
即行高通常比字体的高度还要高

行高可以用line-height来设置（在style中设置）
行高特点

line-height:2; 表示行高是字体高度的2倍
line-height:50px;表示行高是50px高度
行高会在字体框上下平均分配即设置行高可以使字体在字体框里垂直居中
行高可以设置文字的行间距（每行文字间的距离）
行间距=行高-文字高度
如图设置了4倍字体大小的行高=200px 文字在每行中垂直居中
行间距=200-50=150

四、文字简写属性

用font可以设置字体的所有相关属性
font:字体大小/行高字体族
即此情况

   <style>
div{
    font-size: 50px;
    font-family: '宋体',sans-serif;/*字体族*/
    line-height:2;/*设置两倍字体大小的行高*/
}
    </style>

等价于简写

    <style>
div{
    font:50px/2 '宋体',sans-serif;
}
    </style>

font可设置字体属性的简写形式
要注意以下情况

   <style>
div{
    line-height:2;/*设置字体大小两倍的行高*/
    font:50px '宋体',sans-serif;/*简写*/
}
    </style>

此时行高是单独设置简写属性中为写行高
当简写属性中未写行高时，系统会默认设置行高值，且会覆盖之前单独设置的行高。即上面情况行高不是2倍字体大小，而是系统默认设置的行高。

字体的简写属性中必须写字体大小和字体族，也可以设置其他样式
比如

font:italic bold 50px '宋体',sans-serif;/*italic表示斜体 bold表示加粗顺序没有要求  但字体大小和字体族必须设置在后面*/

font-weight表示字体的一个加粗样式
font-weight:bold;字体加粗
font-weight:normal;默认值不加粗

同理行高当字体简写中未写加粗效果时系统会默认不加粗并且覆盖单独写的加粗样式
故字体的简写属性要慎用

五、文本的水平和垂直对齐

text-align设置文本的水平对齐
四个可选值
text-align: left;向左对齐
在这里插入图片描述
text-align: right;向右对齐

text-align: center;使文字居中对齐

text-align: justify;使文字两端对齐
（此属性只有一行字时是不起效果的）这个属性的兼容性不好
要想实现文字两端对齐比较麻烦可以参考justify的使用

文字的垂直对齐属性
vertical-align设置元素垂直对齐的方式
可选值:
vertical-align:baseline;默认值基线对齐（底线）
vertical-align:top;（向上对齐）
在这里插入图片描述
此效果给子元素蓝色框设置了vertical-align:top;子元素就向上对齐父元素