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

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

App.vuestyle标签下引入字体文件后,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. 2019-8-31-ASP.NET-Core-开启后台任务

    title author date CreateTime categories ASP.NET Core 开启后台任务 lindexi 2019-08-31 16:55:58 +0800 2019-3 ...

  2. 2018-10-22-win10-uwp-自定义控件入门

    title author date CreateTime categories win10 uwp 自定义控件入门 lindexi 2018-10-22 09:47:54 +0800 2018-10- ...

  3. vueX中使用namespaced

    用法: namespaced:true; getter调用时: this.$store.getters['XXX/getXXX']; commit调用时: this.$store.commit('XX ...

  4. Linux 内核热插拔操作

    热插拔事件的实际控制是通过一套存储于 kset_hotplug_ops 结构的方法完成. struct kset_hotplug_ops { int (*filter)(struct kset *ks ...

  5. vue-learning:3-template-{{}}-and-v-html

    插值{{ }} 和 v-html 本节开始,我们按如下顺序学习vue模板API-指令.点击各部分的DEMO可在线查看代码 输出字符串文本内容的插值:{{}} 输出HMTL元素作为内容的指令:v-htm ...

  6. vue-learning:22 - js - directives

    directives 在讲解视图层指令时,我们讲到ref特性,使用它我们可以获取当前DOM元素对象,以便执行相关操作. <div id="app"> <input ...

  7. 2019浙江ACM省赛——部分题目

    有一些题目过了我还没有重新写,先放一些我重新写好了的吧 签到题拿到了信心吧,9分钟写完两题,我们贼开心,我大哥说签到题有什么好开心的,如果不是我有一些地方卡了下,可能还是更快吧,还有就是测试案例多试了 ...

  8. codeforces 1136E 线段树

    codeforces 1136E: 题意:给你一个长度为n的序列a和长度为n-1的序列k,序列a在任何时候都满足如下性质,a[i+1]>=ai+ki,如果更新后a[i+1]<ai+ki了, ...

  9. 【Linux】ssh-copy-id三步实现ssh免密登陆

    一.本地机器上使用ssh-keygen产生公钥私钥对 ssh-keygen -t rsa -C "XXXX@163.com" --->执行完会在~/.ssh/下生成公钥私钥对 ...

  10. 第二阶段:1.流程图:12.AXURE绘制页面流程图

    注意的事项: 完整的页面流程图