31、font

最新推荐文章于 2023-04-03 16:26:18 发布

五仁卤鸡翅

最新推荐文章于 2023-04-03 16:26:18 发布

阅读量181

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106980461

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
font
图标字体

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

font

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
1、font-face 可以将服务器中的字体直接提供给用户使用
     两个问题：
       1、加载速度问题
       2、版权问题
       3、字体格式问题

@font-face{
    /* 指定字体名字 */
    font-family:'myFont';
    // 服务器字体路径
    src:url('./font/..')
}

p{
 
   2、字体相关样式：
         color 用来设置字体颜色
         font-size: 字体大小
           和font-size相关的单位
             em: 相当于当前元素的一个font-size
             rem: 相当于根元素的一个font-size
          font-famlily:字体族（字体的格式）
               可选值（大的分类）：
                  serif      衬线字体
                  sans-serif 非衬线字体
                  monospace  等宽字体
                     - 指定字体类别，浏览器会自动使用该类别下的字体
          
                - font-family 可以同时指定多个字体，多个字体间使用,隔开
                字体生效时，优先使用第一个，第一个无法使用，则使用第二个
                以此类推           
                  
                  
    color:red；
    font-size:30px;
    font-family:'Courier New',Courier,monospace
    // 指定自己的字体
    font-family:myFont
}

</style>
<body>
<p>
  今天天气真不错:hello hello how are you!
</p>

</body>

图标字体

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1、图标字体（iconfont）
     - 在使用图标时，将图标设置为字体，通过@font-face对字体引入
     - 就可以通过使用字体的形式来使用图标了 


2、fontAwesome 使用
       1、下载
       2、解压
       3、css 和webfonts移动到项目，必须在同一级目录
       4、引入all.css引入网页中
       5、使用图标字体，直接通过类名使用图标字体
                     class="fas fa-bell"
                     class="fab fa-accessible-item"


</style>
<body>
<p class="fas fa-bell">
  今天天气真不错:hello hello how are you!
</p>


<li class="fas fa-bell" style="font-size:90px;color:red"></li>


</body>

 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
li{
    list-style:none;
}

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

li::before{
    content:'\f1b0';
    font-family:'Font Awesome 5 free';
    font-weight:900;
    color:blue;
    margin-right:10px;
}



</style>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
3、通过实体使用图标字体
     &#x图标编码
<span class="fas">&#xf0f3</span>
</body>
</html>