有时候为了个性化,可能需要为部分字体添加特殊的font-family

在static文件夹中创建font文件夹,内容如下:

css内容如下:

  1. @font-face {
  2. font-family: vueblog;
  3. src: url("./vueblog.ttf");
  4. }
  5. .vueblog-font {
  6. font-family: vueblog;
  7. }

在app.vue中引入css

在需要加样式的字体上,加上vueblog-font类

我是特殊样式的字体

注意:文件夹一定要放到static目录下,否者打包会出错,另外如果按照以上操作还是没有样式,可能是你的ttf文件问题

vue中使用特殊字体的更多相关文章

  1. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  2. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  3. vue中的图标字体引入

    网址:https://icomoon.io/app/#/select: 特点:样式多,免费 操作: 1.相中的,随便点,不要钱,generat fonts然后download,得到一个压缩文件,解压, ...

  4. vue中鼠标移入字体下面显示颜色并改变字体颜色的问题

    <template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...

  5. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

  6. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  7. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  8. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. vue中assets和static的区别

    Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点:   assets和static两个都是存放静态资源文件.项目中所需要 ...

随机推荐

  1. springboot读取resource下的文本文件

    https://blog.csdn.net/programmeryu/article/details/58002218 文本所在位置: 获取ZH.txt: File file = ResourceUt ...

  2. 【Python】 linecache模块读取文件

    [linecache] 过往在读取文件的时候,我们通常使用的是这种模式: with open('file.txt','r') as f: line = f.readline() while line: ...

  3. 微信小程序——wxParse使用方法

    wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxPar ...

  4. 微信小程序——倒计时功能

    做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...

  5. 华为手机使用objectAnimation异常

    在一个recyclerView上实现item的立体翻转动画,魅族.小米.华为平板都试过了没问题,但是在一个7.0的华为手机上,只要一翻转item就消失了,网上发现也有其他人遇到这种问题,大概是obje ...

  6. USB2.0学习笔记连载(十四):USB驱动安装及固件程序的编写

    在之前的博客中已经讲过,驱动程序最核心的两个文件,一个是xxx.sys文件,一个是xxx.inf文件,主机是寻找xxx.inf文件. 在下面的文件中有相关关于USB驱动的说明.对于用户来说,xxx.s ...

  7. Pandas DataFrame 函数应用和映射

    apply Numpy 的ufuncs通用函数(元素级数组方法)也可用于操作pandas对象: 另一个常见的操作是,将函数应用到由各列或行所形成的一维数组上.Dataframe的apply方法即可实现 ...

  8. SAP财务供应链与金库管理的联系与区别

    SAP Treasure Module & Cash Fund , Risk Management   本文简要阐述一下什么是财务供应链管理(FSCM),什么是金库管理(Treasury Ma ...

  9. 【Centos】【Python3】yum install 报错

    运行yum install 安装时报错 File "/usr/libexec/urlgrabber-ext-down", line 28 except OSError, e: Sy ...

  10. 64位debian系统下安装inodeClient

    linux下的inodeClient下载: 链接:http://pan.baidu.com/s/1jIoX6Zk 密码:vnws 里面包括一份说明书,一个32位的,一个64位的文件: 对于64位的客户 ...