Vue项目中使用自定义字体样式方式

目录
  • Vue使用自定义字体样式
    • 步骤一
    • 步骤二
    • 步骤三
    • 步骤四
  • 全局自定义字体,提高项目字体美化
    • 1、创建font文件夹
    • 2、创建index.css
    • 3、全局注册
    • 4、页面使用

Vue使用自定义字体样式

步骤一

拿到自定义字体包

首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。

步骤二

在项目文件夹中进行放置自定义字体包的配置

在项目assets文件夹下新建font文件夹，将拿到的字体包放在font文件夹中；

新建一个font.css文件

步骤三

font.css文件配置

在font.css文件中定义所用字体

@font-face {
    font-family: 'ZI DING YI'; /* 重命名字体名 */
    src: url('ZI DING YI.TTF');
    font-weight: normal;
    font-style: normal;
}

步骤四

在app.vue中引入font.css

<style lang="scss">
  @import './assets/font/font.css';
  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>

全局自定义字体,提高项目字体美化

我们在项目开发时.或多或少 会给项目 添加全局字体;

添加字体的最佳方案,请看 四步成功引入

1、创建font文件夹

在assets 静态资源文件夹中,新建font 文件夹

//目录结构
├──node_modules
├──public
├──src
├    ├──api 
├    ├──assets    //静态资源
├        ├──images 
├        ├──font   //存放 公共字体的文件夹
├            ├──common  //存放字体的文件夹
├                ├──weiruan.ttf
├                ├──changcheng.ttf
├                ├──songti.ttf
├                └── ......
├            └──index.css
├        └── css 
├    ├──components
├    └── views
├ ......

2、创建index.css

在刚刚创建好的font 文件夹中新建index.css 存放字体样式

    /*公共字体的样式 */
    @font-face {
      font-family: 'weiruan';
      src:url('./weiruan.otf') format('otf'), 
         url('./changcheng.woff') format('woff'), /* Modern Browsers */
         url('./songti.ttf')  format('truetype'); /* Safari, Android, iOS */
    }

3、全局注册

在脚手架中找到main.js 文件，引入我们需要全局使用的 index.css 文件

//main.js
import './assets/font/index.css' //全局使用

4、页面使用

在需要使用字体的页面，引入全局字体

    div {
          font-family: weiruan; //使用字体
      }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 引用自定义ttf、otf、在线字体的方法

    1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹,之后也可以用于存放一些公共的样式文件.再新建一个 index.less 文件,引入字体. @font-face { font-family: Snickles; src: url('../assets/Snickles-webfont.ttf'); } @font-face { font-family: Ronda; src: url('../assets/

  • vue-quill-editor如何设置字体大小

    目录 vue-quill-editor设置字体大小 vue-quill-editor 样式问题 vue-quill-editor设置字体大小 项目中需要用到富文本编辑器,用的Vue,所以选择了vue-quill-editor这个富文本编辑器,发现字体只有几种大小可以选择,满足不了产品的需求,研究了半天终于改好了.主要是需要更改配置文件,以及对应的CSS和js文件. editor.vue 页面下改变 toolbarOptions的配置项 (editor.vue就是封装的富文本编辑器) const

  • vue中响应式布局如何将字体大小改成自适应

    目录 响应式布局将字体大小改成自适应 vue文字大小自适应问题 响应式布局将字体大小改成自适应 1.在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() {     // 页面开始加载时修改font-size     var html = document.getElementsByTagName("html")[0];     var oWidth = document.body.clientWidth || document.doc

  • vue项目中Toast字体过小,没有边距的解决方案

    vue项目中Toast字体过小,没有边距的解决方案

    目录 vue Toast字体过小,没有边距 解决办法 vue使用Toast最简单方式 1.安装并引入mint-ui 2.引入Toast 3.使用Toast vue Toast字体过小,没有边距 1.前段时间在写项目的时候使用 vant 组件库比较多,在使用vant中Toast时,在Chrome中手机模拟中测试正常,但是当网页放到手机中时字体显示特别小,但是你在vue文件中怎么添加样式都没有用: 2.问题的原因可能是我之前写的那种rem适配方案的问题: 解决办法 在项目 App.vue 文件中添加

  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    目录 vue项目设置活性字体 起因 我们来看看详细步骤吧 效果 vue项目引入特殊字体 特殊字体指的是默认电脑中没有的 vue项目设置活性字体 起因 最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • Vue项目中使用自定义字体样式方式

    目录 Vue使用自定义字体样式 步骤一 步骤二 步骤三 步骤四 全局自定义字体,提高项目字体美化 1.创建font文件夹 2.创建index.css 3.全局注册 4.页面使用 Vue使用自定义字体样式 步骤一 拿到自定义字体包 首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二 在项目文件夹中进行放置自定义字体包的配置 在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中: 新建一个font.c

  • 在iview+vue项目中使用自定义icon图标方式

    在iview+vue项目中使用自定义icon图标方式

    目录 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库 2. 到购物车中点击添加至项目 3. 给项目起个名字 4. 把下面这些文件放到我的项目的static中 5. 在main.js中全局引入iconfont.css 6. 打开刚才下载好的文件里的demo_index.html 7. 在我的路由中加入icon配置 8. 看结构才发现font-family还是默认的iview设置好的 9. 所以要改变font-family的设置 10. 这样就完美的解决了 最近做一个后台管理系统,是用ivi

  • vue项目中封装echarts的优雅方式分享

    vue项目中封装echarts的优雅方式分享

    目录 场景 需求 代码总览 实现 components--chart--index.vue components--chart--index.js components--chart--options main.js chartTest index.vue index.js 代码 总结 补充 补充2:图表高亮轮询,dispatchAction使用 使用方法 附:echarts 饼图调用高亮示例 dispatchAction 补充3:封装echarts地图,姐妹篇 总结 场景 1.Echarts使

  • vue项目中锚点定位替代方式

    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 以上这篇vue项目中锚点定位替代方式就是小编

  • vue项目中轮询状态更改方式(钩子函数)

    目录 vue项目中轮询状态更改 vue轮询方法及清除 vue项目中轮询状态更改 在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改. 而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval);

  • vue项目中使用pinyin转换插件方式

    目录 使用pinyin转换插件 vue实现汉字转拼音 1.建文件 const.js 2.vue-py.js文件 3.项目中使用 使用pinyin转换插件 npm install js-pinyin 具体使用的文件中 import import pinyin from '../../../node_modules/js-pinyin/index' 使用 console.log(pinyin.getFullChars('管理员')) //GuanLiYuan; console.log(pinyin.

  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

随机推荐