当前位置:首页 » 《我的小黑屋》 » 正文

前端引入字体文件

8 人参与  2024年12月10日 08:01  分类 : 《我的小黑屋》  评论

点击全文阅读


1. 字体下载

阿里矢量图图标库地址 https://www.iconfont.cn/,页面打开后选中,素材库 > 字体库
在这里插入图片描述左侧两个标签页可以切换,右侧放大镜图标可以搜索自己需要的字体
在这里插入图片描述字体预览区域可以自行调整进行字体预览
右上角点击字体包下载,下载字体文件
在这里插入图片描述解压字体压缩包
在这里插入图片描述
在这里插入图片描述

2. 示例代码

<!DOCTYPE html><html lang="en"><head>    <style>        body{ font-size: 60px; }        /* 定义字体变量 */        @font-face {            /* myfont 设置字体使用时的名字 */            font-family: 'myfont';            /* 字体引用路径(引入任意一个字体文件即可) */            src: url('./SmileySans-Oblique.otf');            /* src: url('./SmileySans-Oblique.ttf'); */            /* src: url('./SmileySans-Oblique.woff'); */            /* src: url('./SmileySans-Oblique.woff2'); */        }        #text {            /* 使用字体 */            font-family: 'myfont';        }    </style></head><body>    <div>这是普通文本:红红火火恍哈哈哈哈</div>    <div id="text">设置字体后的文本:红红火火恍哈哈哈哈</div></body></html>

3. 效果展示

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/198898.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1