vue超简单加载字体方法,解决scss难加载字体的问题

scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法

在App.vue的style标签下引入字体文件后,scss设置的字体依旧可以正确识别,注意style的lang不要写,就使用原生css

示例引入

<style>

@font-face{

    font-family: pingfang;

    src: url('./style/pingfang.ttf')

}

</style>

然后想要的位置设置font-family为pingfang即可,自己定义别的名字也可以

vue超简单加载字体方法,解决scss难加载字体的问题的更多相关文章

  1. 超简单的qps统计方法(推荐)【转】

    统计最近N秒内的QPS值(包括每秒select,insert等值) mysql> select variable_name,sum(per_sec) as qps from (select st ...

  2. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  3. 【转】简单内存泄漏检测方法 解决 Detected memory leaks! 问题

    我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...

  4. 【Visual Studio】简单内存泄漏检测方法 解决 Detected memory leaks! 问题（转）

    原文转自 http://blog.csdn.net/u011430225/article/details/47840647 我的环境是: XP SP2.VS2003 最近在一个项目中, 程序退出后都出 ...

  5. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  6. 字蛛（font-spider）-单独压缩字体（解决页面少有的特殊字体的字体包引用）

    特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字 ...

  7. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  8. 【elasticsearch】（2）centos7 超简单安装elasticsearch 的监控、测试的集群工具elasticsearch head

    elasticsearch-head是elasticsearch(下面称ES)比较普遍使用的可监控.测试等功能的集群管理工具,是由H5编写的单独的网页程序.使用方法网上很多,这里教大家一个超简单安装h ...

  9. 简单方法解决bootstrap3 modal异步加载只一次的问题

    用过bootstrap3自身的modal的remote属性的人可能都有相同的疑惑:就是点击弹出modal后再次点击会从缓存中加载内容,而不会再次走后台,解决办法就是只要让modal本身的属性发生变化, ...

随机推荐

  1. python编程之操作系统基础

    操作系统发展史: 最早的计算机没有操作系统的概念:是使用打孔机和打孔卡片来进行计算的.只能一个一个处理. 后来产生了批处理系统,可以批量处理,进而加快计算的速度. 批处理系统:串行 数据处理速度加快 ...

  2. js 页面分享

    首先说分享到QQ空间的通用代码:<a href="javascript:void(0);" onclick="window.open('http://sns.qzo ...

  3. Vue实现同级组件的通信

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.index.html <!DOCTYP ...

  4. BoundsChecker下载

    首先,单独的BoundsChecker已经没了,被收购了,整合进了DevPartner 其次,DevPartner是收费软件,属于Borland的.官方地址:http://www.borland.co ...

  5. HDU 1542"Atlantis"（线段树+扫描线求矩形面积并）

    传送门 •题意 给你 n 矩形,每个矩形给出你 $(x_1,y_1),(x_2,y_2)$ 分别表示这个矩形的左下角和右上角坐标: 让你求这 n 个矩形并的面积: 其中 $x \leq 10^{5} ...

  6. 「THUPC 2019」不等式 / inequality

    https://loj.ac/problem/6620 高中数学好题.. |kx+b|的函数图像很直观,直接考虑函数图像: 一定只有一段极小值点! 这个点就是最小值了 特点:斜率为0! 而且发现,如果 ...

  7. IdentityServer4 sign-in

    原文地址 Sign-in IdentityServer 代表 user 分配token之前,user必须登录IdentityServer Cookie authentication 使用 cookie ...

  8. Cisco DNA-C POC环境配置

    Step1:在DNA-C上创建Site,本例创建Global->China->WangJiang->20 F如下图: Step2:配置fusion区域的AAA和NTP等信息,如下图: ...

  9. java日志学习（持续更新）

    1.Java实现日志 java日志体系大体可以分为三个部分:日志门面接口.桥接器.日志框架具体实现.原生日志实现(http://www.importnew.com/16331.html) Java日志 ...

  10. C++学习——输入输出及头文件

    C++学习 ——输入输出及头文件 一.输入输出 (1)cin与cout C++中也可以用printf与scanf,但是相对于这个,cin与cout更加方便一点.让我们先来看一段代码. 运行结果: 这里 ...