0


前端引入字体文件

1. 字体下载

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

2. 示例代码

<!DOCTYPEhtml><htmllang="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><divid="text">设置字体后的文本:红红火火恍哈哈哈哈</div></body></html>

3. 效果展示

在这里插入图片描述


本文转载自: https://blog.csdn.net/weixin_42554330/article/details/141353701
版权归原作者 来一颗砂糖橘 所有, 如有侵权,请联系我们删除。

“前端引入字体文件”的评论:

还没有评论