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>