CSS3自定义字体

最新推荐文章于 2024-05-06 10:28:14 发布

李同学上课啦

最新推荐文章于 2024-05-06 10:28:14 发布

阅读量951

点赞数 2

分类专栏： CSS3 文章标签： css3 html5 vue.js css 前端

本文链接：https://blog.csdn.net/DGL_CSDN/article/details/120000825

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 自定义字体

前提条件：必须要先有字体文件，比如 .ttf 文件，叫 UI 给或者百度自己下载；

1.1 引入字体文件

使用 @font-face 引入字体文件，并且定义该字体的名称为：myFirstFont（自己起名，要有语意性）

<style> 
    @font-face{
        font-family: myFirstFont; 
        src: url('你自己的字体文件路径.ttf')
    } 
</style>

1.2 使用

<style> 
    @font-face{ 
        font-family: myFirstFont; 
        src: url('你自己的字体文件路径.ttf') 
    } 
    .box{
        font-family: myFirstFont;
    } 
</style>
<body>
    <div>这是默认字体</div> 
    <div class="my_font">这是自定义字体</div> 
    <div class="my_font">⼀⼆三四五六七八九十</div> 
    <div class="my_font">哈哈哈哈</div> 
</body>

2 字体图标

2.1 阿里巴巴矢量图标库

图标库地址，必须要登录账号才能进行下一步操作

2.2 新建项目

在顶部菜单栏找到->资源管理->我的项目->新建项目
右边点击新建项目，用于保存自己常用的图标

2.3 添加购物车

项目新建完成后，需要往项目里添加我们要想使用的图标
顶部菜单找到图标库，搜索⼀个想要的图标，然后添加到购物⻋

2.4 添加图标到项目中

添加到购物车完成后，点击右上角的购物车图标，选择添加至项目

选择我们刚刚创建的项目->点击确定
之后自动跳转到对应的项目里了

2.5 引入文件

点击项目中下载至本地按钮，将解压的文件夹整体放入项目中，在项目中引用文件中的 iconfont.css 文件
或者点击查看在线链接，生成一个在线地址直接在项目中引用

2.6 使用图标

首先标签添加一个 iconfont 类名
再给标签添加一个图标对应的类名
图标大小通过 font-size 来调整

李同学上课啦

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3自定义字体

1 自定义字体前提条件：必须要先有字体文件，比如 .ttf 文件，叫 UI 给或者百度自己下载；1.1 引入字体文件使用 @font-face 引入字体文件，并且定义该字体的名称为：myFirstFont（自己起名，要有语意性）<style> @font-face{ font-family: myFirstFont; src: url('你自己的字体文件路径.ttf') } </style>1.2 使...
复制链接

扫一扫