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. [CF118D]Caesar's Legions 题解

    题意简述 一个01序列由\(n_1\)个0和\(n_2\)个1组成,求最长连续0串长度不超过\(k_1\),最长连续1串长度不超过\(k_2\)的序列的方案总数 题解 状态 方案总数 变量 已经取了i ...

  2. 使用ThreadPoolTaskScheduler动态修改调度时间

    用SchedulingConfigurer接口只能统一修改,要分开控制的话有多少个job就要有多少个实现.比较麻烦 配置线程池ThreadPoolTaskScheduler @Configuratio ...

  3. BZOJ 4417 Luogu P3990 [SHOI2013]超级跳马 (DP、矩阵乘法)

    题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=4417 (luogu)https://www.luogu.org/prob ...

  4. 【转】BYV--有向图强连通分量的Tarjan算法

    转自beyond the void 的博客: https://www.byvoid.com/zhs/blog/scc-tarjan 注:红色为标注部分 [有向图强连通分量] 在有向图G中,如果两个顶点 ...

  5. IT界须知的故事——仙童八叛徒

    原文:http://blog.sina.com.cn/s/blog_457012450100vnbl.html 许多电脑史学家都认为,要想了解美国硅谷的发展史,就必须了解早期的仙童半导体公司.这家公司 ...

  6. [CSP-S模拟测试]:异或(数学)

    题目描述 给定$L,R$,我们希望你求出:$$\sum\limits_{i=L}^R\sum\limits_{j=L}^R(i\oplus j)$$其中这里的$\oplus$表示异或运算.答案对$10 ...

  7. nginx下的负载均衡

    负载均衡应用场景: 普通web应用部署到多台应用服务器上,客户端通过访问应用服务器发送请求,最简单的就是n对1模式,n个客户端访问同一个应用服务器,这种情况当并发量大了,就无法应对,而且,如果只有一台 ...

  8. 20175308 2018-2019-2 实验四 《Android开发基础》实验报告

    20175308 2018-2019-2 实验四 <Android开发基础>实验报告 实验要求 参考 Android开发简易教程 完成云班课中的检查点,也可以先完成实验报告,直接提交.注意 ...

  9. SpringMVC - <mvc:default-servlet-handler/> 导致 Controller失效

    原文地址:http://blog.csdn.net/j080624/article/details/66969987

  10. Mysql 数据库锁表的原因和解决方法

    摘自: https://www.csdn.net/gather_2f/MtTaIgxsMTM5NC1ibG9n.html 锁表的原因:当多个连接(数据库连接)同时对一个表的数据进行更新操作,那么速度将 ...