vue项目导入谷歌字体包

实现导入谷歌字体

谷歌字体链接：http://www.googlefonts.cn/chinese

App.vue

<style>@import '/common/font/font.css';
</style>

main.js

import './common/font/font.css'

font.css

@font-face {  font-family: 'HanaleiFill-Regular'; src: url('HanaleiFill-Regular.ttf');  font-weight: normal;  font-style: normal;
}

ttf文件为从谷歌下载的字体第三方包

webpack.base.conf.js

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

vue项目导入谷歌字体包相关推荐

vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue项目里面引入字体包
1.将ui给的字体包放到assets,同时新建font.css文件 2.在font.css中配置字体 @font-face {font-family: "Dolce-V-H-B"; ...
vue项目导入字体包以及根据所需文字压缩字体包
前端项目使用的字体包格式为ttf,如果手上的字体包格式是otf,首先要进行格式转换使用Font Creator 传入otf文件,另存为ttf文件即可,以 SourceHanSerifCN-Light ...
vue中怎么引入字体包（超详细）
vue中怎么引入字体包一.创建文件并添加字体包 1.在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名): 2.把字体包放入text文件,并创建 ...
Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
Vue 项目导入字体文件
要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件.本文章以平方字体为例. 1.导入字体文件 1.下载相应的字体文件,或者找UI设计师要一份(如果UI设计 ...
如何在项目中使用字体包
一. 拿到字体包转为ttf格式推荐网站: https://www.fontke.com/tool/convfont/, 一键转换二. 在项目中新建font文件夹, 为两个类型的字体包, 新建两个二 ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
vue项目如何打war包
通常vue项目是打包后直接放在nginx容器下,但有时会由于某些原因,需要将前端项目布署到其他容器下,比如weblogic等,这时我们就需要将项目打包成war包,具体操作方法如下: 1. 环境准备 1 ...

vue项目导入谷歌字体包

vue项目导入谷歌字体包相关推荐

最新文章

热门文章