vue项目引入三方字体

vue2项目引入三方字体

注意:前提是字体文件没有问题

1.新建一个放字体的文件font,放入字体文件，定义一个字体font.css

@font-face {  font-family:"庞门正道标题体";/*注意 每次添加format('embedded-opentype')都会出错 我没加这个为了兼容IE9的format 可能是编译的问题 */src: url("../font/庞门正道标题体.ttf") format('truetype') ;font-weight: normal;  font-style: normal;
}

2.在mian.js中初始化中加载font.css

...import "@/assets/css/font.css"
...

3.vue,ng,react 这类框架，库都需要注意在打包编译的时候是否影响

配置webpack.base.conf.js 文件

{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}

页面中的运用

...<div style="font-family:庞门正道标题体 !important">哈哈哈</div>...

效果成功

vue项目引入三方字体相关推荐

Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
Vue项目引入自定义字体
1. 问设计先要到字体文件(woff2|eot|ttf|otf) 因为项目对浏览器支持性要求不高,所以笔者只用了ttf文件(仅以苹方字体举例),一般情况ttf和woff就够用注: 如果要求支持Ope ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue项目引入新字体
1.把字体库放在文件中在这里插入图片描述 2.新建字样式文件文件写入: @font-face {font-family: DS-Digital; //字体名称可随意指定src: url('~@/ ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...

vue项目引入三方字体

vue项目引入三方字体相关推荐

最新文章

热门文章