web字体和字体图标

最新推荐文章于 2023-10-24 14:13:30 发布

Lomon6

最新推荐文章于 2023-10-24 14:13:30 发布

阅读量419

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_43952245/article/details/98884239

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

web字体和图标

web字体

用户电脑上没有安装相应字体，强制让用户下载该字体

使用@font-face指令制作一个新字体
格式如下：

        /* 制作一个新的字体，名称叫做good night */
        @font-face {
            font-family: "good night";
            src: url("./font/晚安体.ttf");//字体文件的存放位置
        }

        p {
            font-family: "good night";
        }
    </style>
    <body>
    <p>
        长夜降至，我从今开始守望。
    </p>
</body>

字体图标

常见字体图标库：iconfont.cn

在线使用字体图标

让字体图标在线生成css

<head>
    <title>在线字体图标库</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1206816_qshsac4925m.css">
</head>
<body>
    <p>
        <i class="iconfont icon-danseshixintubiao-"></i>
        <span>adsfasdfasdf</span>
        <i class="iconfont icon-yonghu"></i>
    </p>
</body>

离线使用字体图标库

将字体图标库下载到本地 —>将这些文件添加到自己的项目中引用即可

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
    <p>
        <i class="iconfont icon-ditu"></i>
    </p>
</body>```

Lomon6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web字体和字体图标

web字体和图标web字体用户电脑上没有安装相应字体，强制让用户下载该字体使用@font-face指令制作一个新字体格式如下： /* 制作一个新的字体，名称叫做good night */ @font-face { font-family: "good night"; src: url("./font/晚安体.t...
复制链接

扫一扫

专栏目录