vue如何使用外部特殊字体的操作

 更新时间:2020年07月30日 10:49:58   作者:听听那晚风  
这篇文章主要介绍了vue如何使用外部特殊字体的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

话不多说先看效果:

我这里使用的是“优设标题这种字体”,接下来就是实现步骤了:

1、先在百度上下载所需要的字体ttf文件

2、在src文件夹新建common文件夹再建 font文件夹

3、在font文件夹里新建 font.css文件,以及把下载好的ttf文件放入

font.css内容如下

4、在App.vue的style里引入font.css文件

5、在需要用到特殊字体的地方,把 font-family:”自定义字体名”,这里的优设标题就是在font.css文件里自定义的字体名

这样就实现使用特殊字体啦,希望对萌新有所帮助~

补充知识:怎么把分化成元,并且保留两位小数,用vue来做

我就废话不多说了,大家还是直接看代码吧~

<el-table-column prop="amount"
            label="申请提现金额"
            width="120" 
            align="center">
    <template scope="scope">
     {{ scope.row.amount | filterMoney }}
    </template>
   </el-table-column>
 
 filters: {
  filterMoney (num) {
   return (num / 100).toFixed(2)
  }
 },

以上这篇vue如何使用外部特殊字体的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vuejs第十篇之vuejs父子组件通信

    Vuejs第十篇之vuejs父子组件通信

    这篇文章主要介绍了Vuejs第十篇之vuejs父子组件通信的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 如何用vue-pdf包实现pdf文件预览,支持分页

    如何用vue-pdf包实现pdf文件预览,支持分页

    这篇文章主要介绍了如何用vue-pdf包实现pdf文件预览,支持分页问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VueJS全面解析

    VueJS全面解析

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。这篇文章主要介绍了VueJS全面解析的相关资料,需要的朋友可以参考下
    2016-11-11
  • elementui之el-table如何通过v-if控制按钮显示与隐藏

    elementui之el-table如何通过v-if控制按钮显示与隐藏

    这篇文章主要介绍了elementui之el-table如何通过v-if控制按钮显示与隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue3源码分析调度器与watch用法原理

    Vue3源码分析调度器与watch用法原理

    这篇文章主要为大家介绍了Vue3源码分析调度器与watch用法原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Vue2与Vue3如何利用install自定义全局确认框组件编写

    Vue2与Vue3如何利用install自定义全局确认框组件编写

    这篇文章主要介绍了Vue2与Vue3如何利用install自定义全局确认框组件编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • uniapp开发打包多端应用完整方法指南

    uniapp开发打包多端应用完整方法指南

    这篇文章主要介绍了uniapp开发打包多端应用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS应用,需要的朋友可以参考下
    2022-12-12
  • 你不可不知的Vue.js列表渲染详解

    你不可不知的Vue.js列表渲染详解

    这篇文章主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • vue使用drag与drop实现拖拽的示例代码

    vue使用drag与drop实现拖拽的示例代码

    本篇文章主要介绍了vue使用drag与drop实现拖拽的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 解决Vue中 父子传值 数据丢失问题

    解决Vue中 父子传值 数据丢失问题

    这篇文章主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论