devbox
算法构造者2
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06font&background_font awesome brands 的类别

作者：算法构造者2 | 2024-01-30 19:25:32

赞

踩

font awesome brands 的类别

目录

一、字体族

二、图标字体简介（font awesome的使用）

三、图标字体的其他使用方式

四、iconfont

五、行高

六、字体的简写属性

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

八、其他的文本样式

九、综合案例——新闻页面

一、字体族

字体相关的样式

        color 用来设置字体颜色

        font-size  字体的大小

                和 font-size 相关的单位

                        em 相当于当前元素的一个font-size

                        rem  相当于根元素的一个font-size

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

                可选值（字体类别，与微软雅黑、华文彩云等不同）

                        serif  衬线字体

                        sans-serif   非衬线字体

                        monospace  等宽字体

                        cursive  草书字体

                        fantasy  虚幻字体

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

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

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

                        一般情况下，如果有空格隔开的多个单词组成的字体，加引号。

字体可不可以使用由用户的计算机中是否安装了该字体决定

字体在计算机中的位置：C盘——windows——fonts

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

        问题：

                1. 加载速度比较慢

                2. 版权问题

                3. 字体格式，如一般字体文件为.ttf

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         @font-face{
  8.             /* 指定字体的名字，自己起的 */
  9.             font-family:'myfont';
  10.             /* 服务器中字体的路径 */
  11.             src:url('路径')format('truetype') ;
  12.         }
  13.         p{
  14.             color: red;
  15.             font-size: 20px;
  16.             font-family:'Courier New', Courier, monospace;
  17.             /* 同时指定多个字体，使用逗号隔开，
  18.             上面中第一个字体使用引号引起来的原因是该字体出现空格，引起来确保没问题
  19.             对于包含空格以及特殊符号的应用引号引起来 */
  20.  
  21.             /* Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif; */           
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <p>
  27.         今天天气真不错，Hello Hello How are you!
  28.     </p>
  29. </body>
  30. </html>

二、图标字体简介（font awesome的使用）

图标字体（iconfont）

        - 在网页中经常需要使用一些图标，可以通过图片来引入图标

                但是图片大小本身比较大，并且非常不灵活，如不能改颜色

        - 所以在使用图标时，我们还可以将图标直接设置为字体，

                然后通过font -face 的形式来对字体进行引入

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

        - 展示的是图标，本质属于字体

font awesome 使用步骤：

        1. 下载    Font Awesome （在英文官网上下载，比较新）

        2. 解压

        3. 将解压完的css 和 webfonts 移动到项目中，注意这两个文件必须在项目的同一级目录下

        4. 将 all.css 引入到网页中，使用 link 标签引入，

                如<link rel="stylesheet" href="./fontawesome/css/all.css">

        5. 使用图标字体

                - 直接通过类名来使用图标字体  class="fas fa-bell"

                        第一个类fas 是固定的，后边的是要的图标的类名，但不是所有的图标都是fas

                        如轮椅的为fab   class="fab fa-accessible-icon"

                        主要有两个类fas fab，fas不行就是用fab

直接通过类名使用图标字体：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <!-- 将 all.css 引入到网页中 -->
  7.     <link rel="stylesheet" href="./fontawesome/css/all.css">
  8. </head>
  9. <body>
  10.     <!-- i标签为斜体，但是现在一般使用 i 标签来表示图标字体 -->
  11.     <i class="fas fa-bell" style="font-size:40px; color:red;"></i>
  12.     <i class="fas fa-bell-slash"></i>
  13.     <i class="fab fa-accessible-icon"></i>
  14.     <i class="fas fa-otter" style="font-size: 100px; color:blue"></i>
  15. </body>
  16. </html>

三、图标字体的其他使用方式

看项目中的文件如<link rel="stylesheet" href="./fontawesome/css/all.css"> 使用Ctrl + 单击

图标字体的其他使用方式：

        通过伪元素来设置图标字体

                1. 找到要设置图标的元素通过 ::before 或者 ::after选中

                2. 在content 中设置字体的编码，反斜杠\ + 编码，字体的编码去文档中查询，在对应图标的右侧

                3. 设置字体的样式

                        font-family:'Font Awesome 6 Free'   对应fas

                        font-family: 'Font Awesome 6 Brands'   对应fab，二者之一

                        font-weight: 900

        通过实体来使用图标字体（实体为&开头，；结尾）

                &#x图标的编码;  且应在元素加上类名fab、fas

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <!-- 将 all.css 引入到网页中 -->
  7.     <link rel="stylesheet" href="./fontawesome/css/all.css">
  8.     <style>
  9.         li{
  10.             /* 去掉项目符号 */
  11.             list-style: none;
  12.         }
  13.         li::before{
  14.             content: '\f1b0';/*反斜杠+编码*/
  15.             font-family: 'Font Awesome 6 Free';
  16.             font-weight: 900;
  17.             /* font-weight 必须写 */
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <ul>
  23.         <!-- 为每个li设置图标，若直接使用类名的方式比价麻烦 -->
  24.         <li>
  25.             <i class="fas fa-star"></i>
  26.             锄禾日当午
  27.         </li>
  28.         <li>汗滴禾下土</li>
  29.         <li>谁知盘中餐</li>
  30.         <li>粒粒皆辛苦</li>
  31.     </ul>
  32.     <!-- 使用实体，&开头;结尾 ，图标编码前加 #x, 且必须写类名fab、fas-->
  33.     <span class="fas">&#xf0f3;</span>
  34. </body>
  35. </html>

四、iconfont

iconfont 图标库 iconfont-阿里巴巴矢量图标库

在使用之前要先注册登录才可使用，同时若在做项目使用该库中的图标时，最好联系作者确定版权问题

可以在素材库——官方图标库——选中图标加入购物车——将购物车中的图标添加至项目

然后资源管理——我的项目——点击下载至本地——将文件拷贝到桌面——在需使用图标的项目中创建文件夹——把文件复制到项目的文件夹中——对于 demo_index.html和demo.css两个文件，没用可以删掉

 demo_index.html 是一个说明

然后就可以引用并使用三种方式使用图标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <!-- 将 iconfont.css 引入到网页中 -->
  7.     <link rel="stylesheet" href="./iconfont/iconfont.css">
  8.     <style>
  9.        .iconfont{
  10.         font-size: 100px;
  11.        }
  12.        /* 使用元素选择器i 修改图标大小不起作用，是因为之前对该图标进行了设置
  13.        而元素选择器的权重不如类选择器 */
  14.  
  15.        /* 使用伪元素选择器 */
  16.        p::before{
  17.         content:'\e625';
  18.         font-family:'iconfont';/*使用iconfont库时font-family为iconfont*/
  19.         font-size:100px;/**为图标设置大小，可以不写/
  20.        }
  21.     </style>
  22. </head>
  23. <body>
  24.     <!-- 通过实体的方式使用图标字体,且类名要设置为iconfont -->
  25.     <i class="iconfont">&#xe61c;</i>
  26.     <i class="iconfont">&#xe622;</i>
  27.     
  28.     <!-- 直接使用类名，第一个固定类名为iconfont -->
  29.     <i class="iconfont icon-ganlaji"></i>
  30.     <i class="iconfont icon-qitalaji"></i>
  31.  
  32.     <!-- 使用伪元素选择器 -->
  33.     <p>Hello</p>
  34. </body>
  35. </html>

五、行高

行高（line-height）

        - 行高指的是文字占有的实际高度

        - 可以通过line-height来设置行高

                行高可以直接指定一个大小（px em）

                也可以直接为行高设置一个整数

                        如果是一个整数的话，行高将会是字体的指定的倍数

                        默认行高为1.33倍字体

        - 行高经常还用于设置文字的行间距

                行间距 = 行高 - 字体大小

字体框

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

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

     可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.        div{
  8.         /* height: 200px; */
  9.         font-size:50px;
  10.         border: 1px red solid;
  11.         line-height:200px;
  12.        }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div>今天天气真不错! Hello Hello 今天天气真不错! Hello Hello 今天天气真不错! Hello Hello</div>
  17. </body>
  18. </html>

六、字体的简写属性

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

        语法：

                font: 字体大小/行高  字体族

                行高可以省略不写，如果不写会使用默认值，字体大小和字体族是必须要写的

                字体大小和字体族前面还可以写字体的其他属性，如font-style font-weight

                使用font时，若不写行高，但在之前使用line-height设置了行高，font的默认值会覆盖之前的,若想使line-height生效，应写在font 的下面

  1. div{
  2.   line-height: 100px;
  3.   font: 50px 'Times New Roman',Times,serif;
  4. }

 font-weight  字重，字体的加粗

        可选值：

                normal  默认值 不加粗，等价于400

                bold   加粗，相当于700

                100-900  九个级别（没什么用）高一个级别可能更粗

font-style  字体的风格

        可选值：

                normal  默认值 正常的

                italic   斜体

font-weight 和 font-style 同样不写时，使用默认值，若前面设置了会覆盖前面的

font的简写属性，对于没写的属性会使用默认值，会覆盖之前的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.        div{
  8.         border: 1px red solid;
  9.         /* font-weight: bold;
  10.         font-style: italic; */
  11.         /* font-size:50px;
  12.         font-family: 'Times New Roman',Times,serif; */
  13.         font:bold italic 50px 'Times New Roman',Times,serif;
  14.         /* font-weight: 900; */
  15.        }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>今天天气真不错! Hello Hello</div>
  20. </body>
  21. </html>

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

text-align  文本的水平对齐

        可选值：

                left  左侧对齐

                right  右侧对齐

                center  居中对齐

                justify 两端对齐

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

        可选值：

                baseline  基线对齐，默认值，子元素和父元素的基线对齐

                top  顶部对齐

                bottom 底部对齐

                middle  居中对齐，将子元素的中线与父元素的x字母的中线对齐

        还可以直接指定值

对于图片放在元素中时，图片与元素下边之间会有一个缝隙，这个缝隙就是图片的基线，这样对于布局会有影响，所以我们可以通过为图片设置vertical-align ，值可以为bottom,top都行，这样就可以使图片的基线不再是那个缝隙。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.        div{
  8.         width: 500px;
  9.         border: 1px red solid;
  10.         text-align:left;
  11.        }
  12.        .box1{
  13.         width: 500px;
  14.         border: 1px red solid;
  15.         font-size: 50px;
  16.        }
  17.        span{
  18.         font-size: 20px;
  19.         border: 1px solid blue;
  20.         vertical-align:middle;
  21.         /* 直接指定值 */
  22.         vertical-align:10px;
  23.        }
  24.        p{
  25.         border: 1px red solid;
  26.        }
  27.        img{
  28.         vertical-align: bottom;
  29.        }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="box1">今天天气 hello<span>真不错 Hello</span>！</div>
  34.     <div>This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.</div>
  35.     <p>
  36.         <img src="./exercise/JS143练习的图片/白色1.jpg" alt="">
  37.     </p>
  38. </body>
  39. </html>

八、其他的文本样式

text-decoration  设置文本修饰

        可选值：

                none  什么都没有(最常用)

                underline  下划线，链接 a 自带下划线（常用）

                line-through  删除线（不常用）

                overline  上划线（几乎不用)

        还可以直接在后面写颜色，表示线的颜色，但这个对于IE浏览器不支持

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

        可选值：

                normal  正常  默认值

                nowrap  不换行

                pre  保留空白

为溢出的内容设置省略号，四个缺一不可：

        width:  px;

        white-space:nowrap ;

        overflow: hidden;

        text-overflow: ellipsis;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.        .box1{
  8.         font-size: 50px;
  9.         font-family: 微软雅黑;
  10.         text-decoration:line-through red;
  11.        }
  12.        .box2{
  13.         width: 200px;
  14.         white-space:nowrap ;
  15.         overflow: hidden;
  16.         text-overflow: ellipsis;
  17.         /* 对于溢出的内容设置省略号，以上四个值缺一不可
  18.         width设置宽度
  19.         white-space设置不换行
  20.         overflow设置裁剪、
  21.         text-overflow设置省略号 */
  22.        }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box2">This is for the particular 
  27.         stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.</div>
  28.     <div class="box1">
  29.         今天天气真不错
  30.     </div>
  31. </body>
  32. </html>

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

        如text-indent: 10px;

      是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

        text-indent: 2em 缩进当前元素2个文字大小的距离

九、综合案例——新闻页面

想要图片居中对齐，则是让它的父元素添加水平居中的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             font: 16px/28px 'Microsoft YaHei';
  11.         }
  12.         h1 {
  13.             /* 文字不加粗 */
  14.             font-weight: 400;
  15.             /* 让h1文字水平居中对齐 */
  16.             text-align: center;
  17.         }
  18.         .gray {
  19.             text-align: center;
  20.             font-size: 12px;
  21.             color: #888;
  22.         }
  23.         a {
  24.             text-decoration: none;
  25.             color: blue;
  26.         }
  27.         
  28.         .search {
  29.             color: #666;
  30.             width: 170px;
  31.         }
  32.         .btn {
  33.             font-weight: 700;
  34.         }
  35.         p {
  36.             text-indent: 2em;
  37.         }
  38.         .pic {
  39.             /* 想要图片居中对其，则是让它的父元素 P标签添加水平居中的代码 */
  40.             text-align: center;
  41.         }
  42.         .footer {
  43.             color: #888;
  44.             font-size: 12px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
  50.     <div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> &nbsp;&nbsp;
  51.         <input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button>
  52.     </div>
  53.      <hr> 
  54.      <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
  55.      
  56.      <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
  57.      <p class="pic">
  58.          <img src="./exercise/练习的截图/网易新闻.webp" alt="">
  59.      </p>
  60.      <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
  61.      <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
  62.      
  63.      <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
  64.      <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
  65.      
  66.     <p> 不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
  67.      
  68.     <p class="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
  69. </body>
  70. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/48503
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号