在前端项目里引入字体

前言

最近做可视化看板产品经理觉得默认字体丑，那么只能在项目里引入一下字体了。

注：

vue项目
项目里使用的是scss，对于css和less 没有进行测试

实现

分享一个下载ppt、字体的网址：第一ppt

在src/assets目录下创建一个文件

我这里创建了一个font文件夹，用来存放字体

下载字体，并创建一个scss文件

在scss文件里设置字体

@font-face {font-family: "hyjt";   //给引入的字体起个名字src: url("./hyjt.ttf");  //引入字体文件
}

使用

以按需引入为例

全局引入
在main.js里全局引入

按需引入
按需引入有两种方式，一种是在js里引入，一种是在style里引入

//js引入
import '../../../../assets/font/font.scss';//style引入
@import url('../../../../assets/font/font.scss');

实例

<template><div><div class="a">字体1</div><div class="b">字体2</div><div class="c">字体3</div><div class="d">字体4</div></div>
</template><script>
// import '../../../../assets/font/font.scss';
export default {data() {return {};},mounted() {},methods: {}
};
</script><style scoped lang="scss">
@import url("../../../../assets/font/font.scss");.a {font-size: 30px;font-family: "jingdan";
}
.b {font-size: 30px;font-family: "qs";
}
.c {font-size: 30px;font-family: "sdc";
}.d {font-size: 30px;font-family: "hyjt";
}
</style>

效果

在前端项目里引入字体相关推荐

前端项目如何引入字体包? 引入字体包不起效果？
因为设计师用的是IMac电脑,设计图默认使用的字体为 pingFangSC-Regular,这就需要我们做开发的引入苹方字体包以达到和设计图一致的视觉效果,(引入其他字体包同理) 先上个苹方字体 ...
前端项目中引入字体文件并使用
首先是下载所需的字体文件,将文件存放在自定义的静态资源目录. 然后在需要引入页面的style模块加入如下代码直接在需要的地方引用text_class样式就可以啦
前端项目，引入苹方字体
UI用的IMac,设计图默认使用的字体为 pingFangSC-Regular 与UI协商后,决定在项目里引入本地的字体库以达到与设计图同样的效果首先下载font字体库这里下载的是ttf文件(并 ...
如何在TypeScript/JavaScript项目里引入MD5校验和
摘要:MD5校验和则是其中一种数学算法,通常是使用工具对文件计算得出的一组32 个字符的十六进制字母和数字. 本文分享自华为云社区<TypeScript/JavaScript项目里如何做MD5校 ...
【Vue】16.vue项目里引入百度统计
参考官网:百度统计开放平台百度统计最近往项目里面引入百度统计,也是在网上查了各种资料,把百度统计的官网api又好好的看了一下,顺着文档的步骤,一步一步走下来,其实还蛮简单的,首先先在百度统计注册一 ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
angular2+onsenui--怎么在angular2项目里引入onsenui框架
在angular2项目里安装onsenui框架,这里使用npm命令. 一.在目录下,shift+鼠标右键–在此处打开命令窗口键入命令:npm install onsenui ngx-onsenui ...
前端项目使用指定字体样式
1. 首先在文件中引入字体文件 2. 然后我们再去创建一个css @font-face {font-family: "Bebas"; /* Project id 2878519 * ...
vue项目里面引入字体包
1.将ui给的字体包放到assets,同时新建font.css文件 2.在font.css中配置字体 @font-face {font-family: "Dolce-V-H-B"; ...

在前端项目里引入字体

前言

实现

使用

在前端项目里引入字体相关推荐

最新文章

热门文章