标签：size CSS4 笔记 字体 对齐 font 行高 图标

一.字体族

字体相关的样式
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族(字体的格式)
可选值：
serif衬线字体
sans-serif 非衬线字体
monospace 等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体
font-family 可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
 

 

图标字体(iconfont)
在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活
所以在使用图标时，我们还可以将图标直接设置为字体然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
 

图标字体的其他使用方式 

 行高(line height)
     1.行高指的是文字占有的实际高度
     2. 可以通过line-height来设置行高
             行高可以直接指定一个大小(px·em)
             也可以直接为行高设置一个整数   如果是一个整数的话，行高将会是字体的指定的倍数
     3.行高经常还用来设置文字的行间距
            行间距= 行高 -字体大小
字体框
    字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配

字体的简写属性

文本的样式

 水平对齐

text-align  文本的水平对齐

可选值    left  左侧对齐

               right  右侧对齐

               center  居中对齐

               justify  两端对齐

垂直对齐

vertical  垂直对齐

 可选值    baseline    默认值  基线对齐

                top   顶部对齐

                bottom   底部对齐

                middle    居中对齐

text-decoration  设置文本修饰

可选值    none  什么都没有

               underline   下划线 

               line-through   删除线

               overline    上划线

white-space   设置网页如何处理空白

可选值   normal  正常

             nowrap  不换行

             pre  保留空白

 

标签：size,CSS4,笔记,字体,对齐,font,行高,图标
来源： https://blog.csdn.net/m0_66506641/article/details/122782955

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。