14-CSS引入外部字体及图标字体

最新推荐文章于 2023-03-13 16:09:08 发布

CapejasmineY

最新推荐文章于 2023-03-13 16:09:08 发布

阅读量823

点赞数

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/CapejasmineY/article/details/126202328

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

一、外部字体引入方式
二、图标字体
- 图标引入

一、外部字体引入方式

<style>
#引入外部字体
@font-face{  
    font-family:自定义字体名称;
    src:url()
}
#指定字体
div{
    font-family:自定义字体名称;
    font-size:50px;
}

二、图标字体

页面常用图标本质是一种字体，不需要截图引入，截图后图片容易失真。
在这里插入图片描述
阿里提供了一个图标字体库，可以下载官方免费图标字体进行引入使用，地址：

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

登录后选择心仪图标加入购物车，在购物车中将图标加入到项目。不要点击下载素材，素材只是下载图片。
在这里插入图片描述

自己新建一个项目，名称随意，添加好图标到项目中后，选中我的项目，下载到本地。在本地解压后复制到项目目录下使用

点击open with。。。查看使用说明，推荐使用font-size

图标引入

<style>
//引入下载的图标文件
<link rel="stylesheet" href="testfont/iconfont.css">
//修改图标字体属性
span.icon-bangzhu{
    font-size:200px;
    color:red;    #均是字体属性
}
</style>

<body>
//加载图标字体
<span class="iconfont icon-bangzhu"></span>
</body>