vue 使用自定义字体

时间:2022-07-26
本文章向大家介绍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>

随机文章
Javascript知识点必读
最近更新