vue 使用自定义字体
在开发中碰到需要使用特殊字体的需求,记录一下 vue 怎么使用自定义字体
·
1.1 引入字体到 Vue 项目
1.1.1 创建字体文件夹
在 static 文件夹下创建 font 文件夹。并将下载好的字体拷贝到文件夹下。
1.1.2 创建字体样式文件(CSS)
@font-face {
font-family: 'numberFont'; // 自定义字体名称
src: url("./number.ttf"); // 字体的路径,后缀 ttf 一定能要小写,否则可能找不到字体文件
}
1.2 使用字体样式
1.2.1 在所需页面应用相应字体样式
<style>
@import "../../static/font/font.css";
</style>
1.2.2 使用字体
<span style="font-family: numberFont">6690802</span>
更多推荐
已为社区贡献14条内容
所有评论(0)