1、UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中:

2、创建一个font.scss(或font.css)文件:

 @font-face {
font-family: 'huawen'; //重命名字体名
src: url('huawen.ttf'); //引入字体
font-weight: normal;
font-style: normal;
}

3、在main.js中引入

import '@/common/css/font.scss';

4、就可以直接使用了:

div {
font-family: 'huawen';
}

vue项目引入外部字体的更多相关文章

  1. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  2. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  3. vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

  4. vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...

  5. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  6. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  7. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  8. 【vue】vue项目引入 Element-UI

    根据vue项目的搭建教程,接下来记录下如何在Vue-cli创建的项目中引入Element-UI. 1.安装直接用命令 (推荐) npm install element-ui 2.直接在根目录下的pac ...

  9. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

随机推荐

  1. 设置获取data-*属性值

    html代码如下: <div id="getId" data-id="122" data-vice-id="11">获取id&l ...

  2. Navicat使用与python操作数据库

    一.Navicat使用 1.下载地址: <https://pan.baidu.com/s/1bpo5mqj> 2.测试+链接数据库,新建库 3.新建表,新增字段+类型+约束 4.设计表:外 ...

  3. nowcoder---常州大学新生寒假训练会试----F 大佬的生日礼包(二分)

    链接:https://www.nowcoder.net/acm/contest/78/F 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...

  4. HBase调优案例(一)——建表长时间等待最后失败

    现象: 1.在HBase Shell里执行建表操作会等很久,最终失败: 2.通过代码侧进行建表同样不能成功. 原因排查: 1.查询HMaster日志,发现有接收到建表(create)的RPC请求:   ...

  5. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

  6. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

  7. .net framework4.6项目的dll升级后,未找到方法“System.String.GetPathsOfAllDirectoriesAbove”解决

    https://stackoverflow.com/questions/59276192/getpathsofalldirectoriesabove-cannot-be-evaluated-after ...

  8. 从三十而立的迷茫,到30K

    很标题党的标题,但是希望分享一下自己的经历,一份有点儿不寻常的经历. 12年创业,到17年末,举步维艰,没有项目,公司只剩下两个人,负债,现实给我这个每见过什么市面,却自命不凡的人狠狠的一个耳光.加上 ...

  9. js fuction函数内return一个内部函数详解

    今天在网上,看到一篇关于js函数难点的文章,js函数的一些难点.在那上面提了一下,关于js函数返回另一个函数的问题,并附上了一道面试题: var add = function(x){ var sum  ...

  10. ES6数组的拓展

    扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 c ...