利用 CSS3 @font-face 规则

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face
{font-family: myFirstFont;
src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */
}

在main.js中全局引用文件import '@/styles/index.scss'

解决字体文件过大问题

Fontmin - 字体子集化方案
可以只取字体文件中项目需要的文字符号使用,从而达到压缩字体文件的效果
进入官网,下载相应客户端进行使用或者阅读使用文档进行使用
点击此处进入官网

该压缩字体文件方法只适用于所需文字较少的情况,如果有更好的压缩文字方法,请在评论中指教

Vue中引入字体并解决字体文件过大问题相关推荐

在Linux VSCode中编写调试C++解决ipch文件过大问题
最近在linux中用VSCode做IDE调试c++,发现vscode会自己在每个文件夹里创建.vscode文件夹,并生成.ipch文件,这个文件动不动就30-40M,即使你的cpp文件才几十k.网上搜 ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...

Vue中引入字体并解决字体文件过大问题

利用 CSS3 @font-face 规则

解决字体文件过大问题

该压缩字体文件方法只适用于所需文字较少的情况,如果有更好的压缩文字方法,请在评论中指教

Vue中引入字体并解决字体文件过大问题相关推荐

最新文章

热门文章