前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 使用自定义字体

vue 使用自定义字体

作者头像
Demo_Null
发布2020-09-28 14:47:42
1.6K0
发布2020-09-28 14:47:42
举报
文章被收录于专栏:Java 学习Java 学习
在这里插入图片描述
在这里插入图片描述

1.1 引入字体到 Vue 项目

1.1.1 创建字体文件夹

在 static 文件夹下创建 font 文件夹。并将下载好的字体拷贝到文件夹下。

1.1.2 创建字体样式文件(CSS)

代码语言:javascript
复制
@font-face {
  font-family: 'numberFont';    // 自定义字体名称
  src: url("./number.ttf");    // 字体的路径,后缀 ttf 一定能要小写,否则可能找不到字体文件
}

1.2 使用字体样式

1.2.1 在所需页面应用相应字体样式

代码语言:javascript
复制
<style>
    @import "../../static/font/font.css";
</style>

1.2.2 使用字体

代码语言:javascript
复制
<span style="font-family: numberFont">6690802</span>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-07-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.1 引入字体到 Vue 项目
    • 1.1.1 创建字体文件夹
      • 1.1.2 创建字体样式文件(CSS)
      • 1.2 使用字体样式
        • 1.2.1 在所需页面应用相应字体样式
          • 1.2.2 使用字体
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档