• 字体族与图标字体

    目录

    一、效果展示

    二、字体族

    1、定义

    2、常见字体族

    3、设置方式

    三、从浏览器显示非本地字体

    1、如何使用

    2、存在的问题

    三、图标字体

    1、使用的必要性

    2、如何设置

    3、三种使用方法

    四、代码

    1、字体族

    2、图标字体

    一、效果展示

      

    二、字体族

    1、定义

    浏览器和本地的字体样式，更确切地说，字体族是一类样式的字体，而并非是某单一字体。例如，好几种字体可能都属于衬线字体族

    2、常见字体族

    （1）serif（衬线字体）

    （2）sans-serif（非衬线字体）

    （3）monospace（等宽字体，多用于代码中，因为各字母占据的宽度大小会相同）

    当然还有很多，zeal中有详细的解释

    3、设置方式

    通过font-family设置，上三类为常见样式，但每个公司要求不同，而且，会使用不止一个字体族来满足浏览器的兼容性

    三、从浏览器显示非本地字体

    1、如何使用

    （1）使用@font-face类

    （2）font-family设置为自己想要的名称

    （3）src: url()中填入字体的文件地址，字体文件多为ttf类型，该类型可兼容多版本浏览器

    （4）在src后可以使用format用于文件解析，但通常大可不必

    （5）之后在其他类中，用font-family导入自己设置好的字体即可

    2、存在的问题

    （1）加载速度可能会比较慢，因为要解析文件

    （2）版权，使用的字体文件在自己电脑上可用，但并不代表有宣传版权

    （3）url格式可能会导致其余浏览器不支持，所以通常会不止一个链接

    三、图标字体

    1、使用的必要性

    （1）替代图片，可以随意设置大小颜色

    （2）本质是字体，是特殊的向量字体，不会导致像素失真（图片放大缩小可能会失真）

    2、如何设置

    （1）从awesome图标字体库（zeal文档中有解释，且不用担心版权）

    -下载压缩包，注意是web压缩包

    -解压缩，并且将文件目录复制粘贴到代码目录下

    -使用link，连接内容css\all.css文件

    -元素中加上图标的class，直接引用

    （2）从阿里liconfont图标字体库（需要自己看解释，可能有版权）

    -登录网站，加入库

    -然后下载到对应目录

    -根据html文件查看导入方法和对应编码、类等

    3、三种使用方法

    （1）对应类使用方法（以awesome为例）

    -在元素中加入类

    -以fas、fab开头，加上对应编码。例如，响铃图标类为fa-bell，则使用的实际类为fas fa-bell

    -对元素进行设置即可

    （2）伪类方法

    -在before或者after中填入内容

    -content设置为对应编码，但要注意前面加\

    -设置font-family为该字体族

    -在某些情况下可能要设置font-weight

    例子

    1. li::before {
    2. /* 龙图片字体的编码 */
    3. content: "\f6d5";
    4. font-size: 10px;
    5. /* 原字体族 */
    6. font-family: "Font Awesome 6 Free";
    7. /* 权重 */
    8. font-weight: 900;
    9. }

    （3）实体设置

    -以&;为结构支撑

    -先加入#x（x是小写）

    -输入对应编码

    四、代码

    1、字体族

    注意：我这里导入了本地字体，使用需要修改文件位置，注意link的文件地址

    1. 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>字体族title>
    8.     <style>
    9.       /* 
    10.         问题：
    11.         1.加载速度
    12.         2.版权
    13.         3.格式，可能多个浏览器不支持
    14.         */
    15.  
    16.       /* 从客户端显示想要的字体 */
    17.       @font-face {
    18.         /* 命名 */
    19.         font-family: art;
    20.         /* 链接地址 */
    21.         /* format用于解析，一般情况下可不使用 */
    22.         src: url("../src/ITCEDSCR.TTF") format("truetype");
    23.       }
    24.       p {
    25.         font-size: 40px;
    26.         color: red;
    27.         /* 衬线字体 */
    28.         /* font-family: serif; */
    29.         /* 非衬线字体 */
    30.         /* font-family:sans-serif; */
    31.         /* 等宽字体 */
    32.         font-family: art;
    33.         font-family: monospace;
    34.       }
    35.     style>
    36.   head>
    37.   <body>
    38.     <p>hello,how are you.i am jack.p>
    39.   body>
    40. html>

    2、图标字体

    注意：这里我使用了awesome图标字体，link文件位置需要自己解决

    1. 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>图标字体title>
    8.     <link rel="stylesheet" href="../src/css/all.css" />
    9.     <style>
    10.       /* 
    11.       图标字体作为图片的代替
    12.       此图标字体来源于awesome，也可国内阿里巴巴下载，但awesome有zeal文档可查看
    13.       
    14.       操作流程：
    15.       1.下载压缩包
    16.       2.解压缩，并且将文件目录复制粘贴到代码目录下
    17.       3.使用link，连接内容
    18.       4.定义class，引用
    19.       
    20.       优点：
    21.       1.防止失真
    22.       2.可以调整大小和颜色
    24.       原理：
    25.       1.通过@font-face链接引入原本的资源
    26.       2.资源全部在zip下载的文件夹里
    27.       */
    28.       i {
    29.         color: green;
    30.         font-size: 100px;
    31.       }
    32.       /* 2.伪类方法 */
    33.       li {
    34.         list-style: none;
    35.       }
    36.       li::before {
    37.         /* 龙图片字体的编码 */
    38.         content: "\f6d5";
    39.         font-size: 10px;
    40.         /* 原字体族 */
    41.         font-family: "Font Awesome 6 Free";
    42.         /* 权重 */
    43.         font-weight: 900;
    44.       }
    45.     style>
    46.   head>
    47.   <body>
    48.     
    49.     <i class="fas fa-bell">i>
    50.     <i class="fas fa-cat">i>
    51.     <ul>
    52.       <li>锄禾日当午li>
    53.       <li>汗滴禾下土li>
    54.       <li>谁知盘中餐li>
    55.       <li>粒粒皆辛苦li>
    56.     ul>
    57.     
    58.     <i class="fas">i>
    59.   body>
    60. html>

  • 相关阅读:
    电子信息工程专业课复习知识点总结：(四）信号与系统、数字信号处理
    Linux内存管理（二十五）：slub 分配器之kmem_cache_destroy
    java基于微信小程序的物流仓储系统 uniapp 小程序
    开发小经验积累
    生日与性格查询易语言代码
    金仓数据库KingbaseES Clusterware配置手册（集群搭建前置操作 ）
    论文阅读 (74)：A Review: Knowledge Reasoning over Knowledge Graph
    Intel 64 和 IA-32 架构指令前缀
    “2024杭州国际物联网展览会”定于4月份在杭州国际博览中心召开
    java-net-php-python-jspm综合彩妆店管理系统查重PPT计算机毕业设计程序
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126184726