6-字体

CSS字体

字体相关样式

• color用来设置字体颜色
• font-size字体的大小
  • em 相当于当前元素的一个font-size
  • rem 相对于根元素的一个font-size

font-family

font-family 指定字体的类别，浏览器会自动使用该类别下的字体

font-family可以同时指定多个字体，多个字体间使用，隔开

字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推:

font-family: "Courier New", Courier, monospace;

常见字体

CSS Fonts(字体) | 菜鸟教程 (runoob.com)

@font-face

除了使用系统自带的字体外,还可以在服务器自定义字体位置

@font-face {
  /* 指定字体名字 */
  font-family: "myFont1";
  /* 服务器中字体路径 */
  src: url("/font/ZCOOLKuaiLe-Regular.woff"),
    url("/font/ZCOOLKuaiLe-Regular.otf"),
    url("/font/ZCOOLKuaiLe-Regular.ttf") format("truetype"); /* 指定字体格式，一般不写 */
}

/* 定义之后引用 */
p {
  font-size: 30px;
  color: salmon;
  font-family: myFont1;
}

缺点:

• 受网络速度影响,可能会出现字体闪烁
• 版权
• 字体格式多,要指定多个

图标字体（iconfont）

图标字体简介

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

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

这样我们就可以通过使用字体的形式来使用图标

fontawesome

Font Awesome官网

下载解压完毕之后，直接将 css 和 webfonts 移动到项目中即可使用

<link rel="stylesheet" href="./exercise/fontawesome-free-6.5.1-web/css/all.css" >
 
<div class="fab fa-qq" style="font-size: 30px;"></div>

图标字体其他使用方式

通过伪元素

1. 找到要设置图标的元素通过::before或::after选中
2. 在content中设置字体的编码
3. 设置字体的样式
   • fab：font-family: 'Font Awesome 5 Brands';
   • fas：font-family: 'Font Awesome 5 Free'; font-weight：900;

<style>
  .poem {
    width: 200px;
    height: 300px;
    margin: auto;
  }

  li {
    list-style: none;
    margin-left: -40px;
  }

  li::before {
    content: "\f130";
    /* font-family: 'Font Awesome 5 Brands'; */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    color: gray;
  }
</style>

<div class="poem">
  <h1>武陵春·春晚</h1>
  <p>[宋] 李清照</p>
  <ul>
    <li>风住尘香花已尽，</li>
    <li>日晚倦梳头。</li>
    <li>物是人非事事休，</li>
    <li>欲语泪先流。</li>
    <li>闻说双溪春尚好，</li>
    <li>也拟泛轻舟。</li>
    <li>只恐双溪舴艋舟，</li>
    <li>载不动、许多愁。</li>
  </ul>
</div>

通过实体设置

通过实体来使用图标字体：&#x图标编码;

<i class="fas">&#xf025;</i>

iconfont

行高

行高line height

文字占有的实际高度，可以通过line-height来设置行高

• 可以直接指定一个大小 px/em
• 也可以直接为行高设置一个小数（字体大小的倍数）

行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小

字体框

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

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

border: 1px black solid;
font-size: 100px;
/* line-height: 100px; */

字体的简写属性

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

font: font-style font-variant font-weight font-size/line-height font-family

其中某些值可以不写，会用默认值

默认值

属性	默认值	其他常用值
font-style	normal	italic
font-variant	normal	small-caps
font-weight	normal	bold
font-size	medium	small、large
line-height	normal
font-family	取决于浏览器

文本对齐方式

水平对齐

text-align 文本的水平对齐

text-align属性值	对齐方式说明
left	左侧对齐
right	右侧对齐
center	居中对齐
justify	两端对齐

垂直对齐

vertical-align 设置元素垂直对齐的方式

vertical-align 属性值	对齐方式说明
baseline	基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

图片的垂直对齐问题

<style>
  .imgDiv {
    border: 5px seagreen solid;
  }

  .imgDiv img {
    width: 400px;
    height: 300px;
  }
</style>

<div class="imgDiv">
  <img src="/assets/news.png" alt="" />
</div>

明显默认情况下，图片底部有一定缝隙，我们稍作修改，给 img 元素添加vertical-align属性值

/* 只要不是基线对齐，就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;

Q：为什么图片会有缝隙？

A：图片属于替换元素，特点与文本一致，也有自己的基线，默认也是基线对齐。而基线位置不在最底部，所以会出现缝隙