在新版Vue中引入外部字体

**第一步:**下载相应的ttf文件,如我下载的华文行楷字体
第二步添加响应的font-css文件

@font-face {font-family: "华文行楷";src: url('华文行楷.ttf');font-weight: normal;font-style: normal;
}

其中font-family为你定义的你以后引这个字体的名字

第三步
在main.js中导入你刚刚创建的css文件

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

最后,在需要的组件中当你需要你引入的外部字体的时候即可轻松引入了;如在我的项目中Home.Vue里需要华文行楷

<style >.homeHeader{background: #409eff;display: flex;/*竖直居中*/align-items: center;justify-content: space-between;padding: 0px 15px;box-sizing: border-box;}.homeHeader .title{font-size: 30px;font-family:华文行楷;color: #ffffff;}

大功告成

在新版Vue中引入外部字体相关推荐

Vue中引入外部字体
使用外部字体首先得有外部字体的包,要得到外部字体的包,无外乎两种途径,一种到付费网站去购买,另一种就是到免费网站下载字体包.收费的傻事我们能做?所以这里给大家上一个免费网址:DaFont.com,目前 ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
项目开发中引入外部字体库
前端web项目下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
html chrome中引入外部字体,强制Chrome在CSS中使用外部字体
您可以重命名CSS中的字体,仍然使用远程woff文件.例如: @font-face { font-family: 'RobotoBis'; font-style: normal; font-weigh ...
vue实例中调用外部js_vue中引入外部js方法实例
我们在做vue项目时,经常会需要引入js,常用的有以下几种.本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家. 第一种import XX from "路径" Vue ...

在新版Vue中引入外部字体

在新版Vue中引入外部字体相关推荐

最新文章

热门文章