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

2024-10-20 19:47:47

话不多说先看效果：

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

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如何使用外部特殊字体的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Vue.js中对css的操作（修改）具体方式详解

使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas
在Vue中使用icon 字体图标的方法

1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹
vue如何引用其他组件（css和js）

1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.
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实践---vue不依赖外部资源实现简单多语操作

vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好的选择. 第一步首先建立一个locales.js 存放多语语言包的内容,这里只写了 zh-CN, en这两种语言,其他还想新增的话方法一样,代码如下: export default { 'zh-CN': { name: '我是中文名字' }, 'en': { name: 'I am Englis
Vue 组件复用多次自定义参数操作

场景: 当项目中多处出现相同的模块时,此时的正常考虑是将其做成公共组建,通过传参不同,实现多处复用具体: 背景:项目使用的技术是VUE+ElementUI 此处,多处出现的模块是select选择框,封装成组件后,传给它option的值,代码如下:  <template> <el-select @change="handleChange" v-model="value"
vue实现从外部修改组件内部的变量的值

1.首先是如何给你定义的变量拿到数据: 这里我自己用的是vuex: 首先在你项目的src文件夹下创建这么一个目录: 之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据, 以下是index.js的代码: 随后就是在homedatas中获取数据了,以下是homedatas.js代码: 以上就是获取数据的步骤,之后就是在页面中拿到这个获取到的数据: 首当其冲不可少的就是引用,引用vuex和引用组件: 之后在页面的jascript中的export defau
在vue项目中实现定义全局变量全局函数操作

写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波. 定义全局变量原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块
在Vue.js中加载字体的正确方法

添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff
Vue.js 实现tab切换并变色操作讲解

在实现这个功能时借鉴的原博主的方法没有实现切换变色,琢磨了好久终于知道了怎么切换变色(小菜鸟的咆哮)!!!记录下来以供参考,以下是vue的完整tab页切换并变色的代码框架. <template> <div > //tab页切换按钮部分 <ul > <li v-for="(item,index) in navList" :class = "{active:!(index- menuIndex)}" @click = 'men
Vue.js 单页面多路由区域操作的实例详解

单页面多路由区域操作在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r
Vue使用zTree插件封装树组件操作示例

本文实例讲述了Vue使用zTree插件封装树组件操作.分享给大家供大家参考,具体如下: 1.通过npm安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': reso
Vue入门之数量加减运算操作示例

本文实例讲述了Vue入门之数量加减运算操作.分享给大家供大家参考,具体如下: 效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList" :key="key.id"> {{key.id}},{{idx}} <template> <button class="cut" @click="cu

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

相关推荐

随机推荐