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

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

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

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

示例引入

<style>
@font-face{
    font-family: pingfang;
    src: url('./style/pingfang.ttf')
}
</style>

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

原文地址:https://www.cnblogs.com/moshuying/p/12203598.html

时间: 2024-10-12 02:29:32

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

简单内存泄漏检测方法 解决 Detected memory leaks! 问题

最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} normal block at 0x05785AD0, 152 bytes long. Data: << N N x 7 > 3C AC 4E 10 00 00 00 00 BC A4 4E 10 78 B6 37 00 Object dump complete.   而且每次退出都是一样的.泄漏的内存块都是98500. 解决方法: 1.

vue入门------简单购物车功能实现(全选,数量加减,价格加减)

简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="box"> 全选:<input type="checkbox" @click="handleAllChecked($event)&q

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

用过bootstrap3自身的modal的remote属性的人可能都有相同的疑惑:就是点击弹出modal后再次点击会从缓存中加载内容,而不会再次走后台,解决办法就是只要让modal本身的属性发生变化,它便会不会加载缓存.现在可以用一个简单的方法解决此问题: $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); 1 $('body').on('hidden.bs.mod

使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题

继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后退.刷新等问题.有博友也遇到了同样的问题,接下来就针对浏览器的前进.后退.刷新进行用户体验优化. 在解决上述问题时也进行了各种search,但是大部分都是自己实现的插件,而且插件年久失修,对于新的jquery支持不佳.也有使用h5新加的history方法来实现的,由于HTML5的广泛使用,绝大部分主

vue项目中实现图片懒加载的方法

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实现方法(使用vue的vue-lazyload插件) 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' 直接使用 Vue.use(VueLazyl

使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

fonts.googleapis.com ajax.googleapis.com wordpress加载慢的解决方法【转】

打开wordpress网站,发现总是提示在加载fonts.googleapis.com或者加载 ajax.googleapis.com导致网站打开非常的慢. 近期,谷歌在香港的服务器已经搬回美国,所以导致在大陆打不开谷歌相关的所有网页和产品. 查询了半天,终于找到了可比较完善的优化解决办法 解决办法一: 就是把把调用的谷歌的文件链接换成国内的链接.在你的后台主题编辑中,在所有的文件中ctrl+F搜索关键字“google”,如果搜到相关谷歌的链接诸如fonts.googleapis.com大家可以

Hibernate的懒加载session丢失解决方法

在web.xml加入spring提供的过滤器,延长session的生命周期 <!--Hibernate的懒加载session丢失解决方法 --> <filter> <filter-name>openSessionInView</filter-name> <filter-class>org.springframework.orm.hibernate4.support.OpenSessionInViewFilter</filter-class&

让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: <script src="xxxx.js"></script> 改变成: 代码如下: <script type="text/javascript"> document.write("<scr