Vue项目中使用自定义字体样式方式
更新时间：2022年09月19日 09:33:12 作者：duyanke888
这篇文章主要介绍了Vue项目中使用自定义字体样式方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue使用自定义字体样式
步骤一
拿到自定义字体包
首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。
步骤二
在项目文件夹中进行放置自定义字体包的配置
在项目assets文件夹下新建font文件夹，将拿到的字体包放在font文件夹中；
新建一个font.css文件
步骤三
font.css文件配置
在font.css文件中定义所用字体
@font-face {
font-family: 'ZI DING YI'; /* 重命名字体名 */
src: url('ZI DING YI.TTF');
font-weight: normal;
font-style: normal;
}步骤四
在app.vue中引入font.css
<style lang="scss">
@import './assets/font/font.css';
#app {
font-family: 'PingFang-RE';
font-weight: 400;
}
</style>全局自定义字体,提高项目字体美化
我们在项目开发时.或多或少 会给项目 添加全局字体;
添加字体的最佳方案,请看 👇 👇 👇 四步成功引入
1、创建font文件夹
在assets 静态资源文件夹中,新建font 文件夹
//目录结构 ├──node_modules ├──public ├──src ├ ├──api ├ ├──assets //静态资源 ├ ├──images ├ ├──font //存放 公共字体的文件夹 ├ ├──common //存放字体的文件夹 ├ ├──weiruan.ttf ├ ├──changcheng.ttf ├ ├──songti.ttf ├ └── ...... ├ └──index.css ├ └── css ├ ├──components ├ └── views ├ ......
2、创建index.css
在刚刚创建好的font 文件夹中新建index.css 存放字体样式
/*公共字体的样式 */
@font-face {
font-family: 'weiruan';
src:url('./weiruan.otf') format('otf'),
url('./changcheng.woff') format('woff'), /* Modern Browsers */
url('./songti.ttf') format('truetype'); /* Safari, Android, iOS */
}3、全局注册
在脚手架中找到main.js 文件，引入我们需要全局使用的 index.css 文件
//main.js import './assets/font/index.css' //全局使用
4、页面使用
在需要使用字体的页面，引入全局字体
div {
font-family: weiruan; //使用字体
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue提供了丰富的API和组件，可以帮助开发者快速地构建现代化的Web应用程序，本文介绍了Vue如何实现分页功能，包括数据的获取、分页器的实现和页面的渲染2023-09-09
这篇文章主要介绍了vite+vue3全局定义less变量在单文件中使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文介绍了如何在Vue3项目中根据路由动态生成侧边菜单,包括准备工作、路由配置基础、组件搭建和优化与拓展,通过这些步骤,可以实现一个灵活且可扩展的侧边菜单系统,提升用户体验,感兴趣的朋友一起看看吧2025-01-01
本篇文章主要介绍了解析Vue2.0双向绑定实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了Vue中的请求拦截器和响应拦截器用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue中v-mode详解以及具体的使用示例,在组件中使用 v-model 时,需要定义model选项,指定绑定的prop和事件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue中计算属性和方法的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue使用Echarts绘制地图的相关资料,Apache ECharts一个基于JavaScript的开源可视化图表库,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,需要的朋友可以参考下2023-09-09
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式，需要的朋友参考下吧2018-03-03
这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容2021-09-09
最新评论