CSS温习回顾-Font字体_fontfamily="myfont1-CSDN博客

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/117524379

CSS温习回顾

CSS字体

字体族
字体的相关样式

—color：用来设置字体颜色（严格意义上，color是设置前景颜色）；

—font-size：用来设置字体的大小；

—font-family：字体族（字体的格式）

—语法：font-family:'微软雅黑';

—可选值（表示字体分类）

serif：表示衬线字体；

sans-serif：表示非衬线字体；

monospace：表示等宽字体；

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

—可以同时指定多个字体，多个字体之间用逗号隔开，字体生效时，优先使用第一个，第一个无法使用使用第二个，依次类推；

—@font-face可以将服务器的字体直接提供给用户使用；

语法如下：
```
<style>
 @font-face{
     /*设定字体族名称*/
     font-family:'myfont';
     src:url('目标字体路径') format("truetype")
     /*
      存在问题：
         加载速度问题，可能出现字体切换效果；
         版权问题；
         字体文件格式问题，存在兼容性问题；
    */  
 }
 p{
     font-family:'myfont';
 }
</style>
```
图标字体

—在网页中，经常需要使用一些小型的图标，可以通过图片引入图标；但是图片本身比较大，并且容易失真，非常不灵活；

—所以在使用图标中，可以将图标设置为字体，通过font-face的形式对字体进行引用，这样就可以使用字体的形式引用图标；

—图标字体库

阿里巴巴矢量图标库；（用户上传，版权问题不是很清晰，商用的时候确认跟原用户确认一下版权问题）；

Font Awesome英文网；

—图标字体可以设置相关大小，颜色并且为矢量图，不会失真；
Font awesome使用步骤

—下载图标字体库；

—解压文件夹；

—将解压完的的.css和.webfonts文件移动到项目中；(.css和.webfonts文件必须在同一级目录下)；

—将all.css通过link引入网页中；

—图标字体使用方式：

—直接通过类名来使用图标字体；

class="fas fa-bell"

class="fab fa-accessible-icon"

—通过**伪元素::before**设置图标字体

1、找到要设置图标的元素，通过::before和::after选中；

2、在content中设置字体编码（文档中查找）,使用规则：\ + 字体编码；

3、设置字体样式

fas:

font-family: 'Font Awesome 5 Free';

fab:

font-family: 'Font Awesome 5 Brands';

例如：
```
<style>
 li::before{
     content:'\f1b0';
     font-famliy:'Font Awesome 5 Free';
     font-weight:900;
     color:blue;
 }
</style>
```
—通过实体的方式设置图标字体；（必须写入fas属性)使用规则： &#x + 字体图标编码 ;

例如：
```
<body>
 <span class="fas">&#xf0f3;</span>
</body>
```
阿里图标库iconfont使用步骤

—登录阿里图标库网站；

—选择相应的图标库，选择图标加入购物车；

—点开购物车，点击添加至项目；

—点击图标管理—>我的项目—>下载至本地，将自己加载到购物车的图标下载到本地文件夹；

—将下载的文件（去除.html文件和demo.css文件）全部加载到项目中；

—在项目中，通过link引入**iconfont.css **文件；

—图标字体使用方法：

—直接使用类元素：<i class="iconfont icon-aitalaji"></i>

—伪元素：
```
<style>
 p::before{
     content:'\e625';
     font-family:'iconfont';
     font-size:100px;
 }
</style>
```
—实体编码：<i class="iconfont">实体编码</i>
行高line-height

—行高指的是文字占有的实际高度（单行行高）；

—可以通过line-height设置行高；

—行高可以直接指定大小（px,em）

—也可以直接为行高设置一个整数，如果是一个整数，行高将是字体的指定倍数；

—默认行高是：line-height:1.33;

—行高会在字体框的上下平均分配；

字体框就是字体存在的格子，设置font-size就是在设置字体高度；

—可以将行高和块元素高度一致，使单行文字在该元素中垂直居中；

—行高可以用来设置文字的行间距；行间距 = 行高 - 字体框大小；
字体简写属性

font 可以设置字体相关的所有属性；

—语法：font:字体大小/行高字体族;

—注意顺序，之间用空格隔开；可以在字体后面指定行高；

—行高可以省略不写，如果不写，行高为默认值；（省略不意味着不起作用）；

—字体大小/行高字体族是必须要写的，并且放在倒数位置，前面可以添加其他属性；例如：

font:bold italic 50px 'Times New Roman',Times,serif;

font-weight

可选值：

bold：加粗效果；

normal：默认值，正常值；

整数：100-900 九个级别；（一般不这样写）

font-style

可选值：

normal：默认值，正常；

italic：斜体；
文本样式

文本水平对齐：text-align

可选值：

—left：默认值，左对齐；

—right：右对齐；

—center：居中对齐；

—justify：两端对齐；

文本垂直对齐：vertical-align

可选值：

—baseline：默认值，基线对齐；

—top：顶部对齐；

—bottom：底部对齐；

—middle：居中对齐；

—还可以设置整数值；

当引入一个图片时，会有一定的缝隙，可以利用vertical-align将图片和border之间的缝隙去除；例如：

vertical-align:top/bottom;（只要不沿着基线对齐就可）

文本修饰：text-decoration

可选值：

—none：默认值；

—underline：下划线；

—line-through：删除线；

—overline：上划线；

语法：text-decoration:可选值颜色;（IE浏览器不兼容）
空白处理：white-space

设置网页如何处理空白：

可选值

—normal：默认值，正常；

—nowrap：不换行；

—pre：保留空白；

例如：
```
<style>
 /*设置溢出内容为省略号，以下四条命令缺一不可*/
 .box1{
     width:200px;
     white-space:nowrap;
     overflow:hidden;
    /*表示溢出的内容设置未省略号*/ 
     text-overflow:ellipsis;
 }
</style>
```