vue项目中该如何引入自定义字体？超简单几步教你实现

最新推荐文章于 2024-05-08 16:50:19 发布
最新推荐文章于 2024-05-08 16:50:19 发布
阅读量3.9k 收藏 6
点赞数 2
分类专栏： 碰到的问题 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41083105/article/details/121563779
版权

在这里斗胆说一句教你实现，其实是我的一种实现方法，觉得十分简单，很好理解，所以在这里分享给大家了。

具体操作

1.在assets中创建一个文件夹，比如叫fonts（或者是其他乱七八糟的名字都随便，都可以）

2.将字体文件引入这个fonts文件夹

 3.在fonts文件夹中创建一个css或者less文件，然后一定一定按下面的方式，字体才能够正确显示:

最低0.47元/天 解锁文章
汤圆真的好可爱
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、可在body中设置字体 body{ font-family: FZCYJ; } 以上这篇vue项目引入字
自定义 弹出框
12-12
在IT行业中，自定义弹出框是用户界面设计中的一个重要元素，它允许开发者根据特定需求创建具有独特功能和外观的对话框。自定义弹出框不仅能够提供标准UI组件无法实现的交互体验，还能增强应用的用户体验和一致性。...
Vue中引入外部字体
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
Vue 引入字体文件
最新发布
2401_84868241的博客
05-08 212
Vue 引入字体文件
如何在vue中引入字体
Orange71234的博客
06-21 7370
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
js font 字体引入多个ttf文件
冰雪为融的博客
06-23 854
js font 字体引入多个ttf文件
vue项目引入字体样式
蓦然回首，那人却在，灯火阑珊处。
04-28 1811
vue项目引入字体样式
基于Vue框架的校园相约健康运动平台.zip
10-06
在“校园相约健康运动平台”项目中，Vue可能结合了其他技术，比如Axios进行API请求，Vuex管理全局状态，Element UI或Vuetify提供UI组件库，以及Vue Router实现路由导航。这些工具和技术的选择和配置将直接影响项目的...
BestShop-Desktop-Project：BestShop项目的桌面版本
03-02
5. **字体文件**：如果项目使用了自定义字体，这些文件将包含字体资源。 6. **配置文件**：如项目设置、数据库连接信息等。 7. **构建脚本**：如Grunt、Gulp或Webpack，用于自动化构建过程，如压缩代码、合并文件...
UEditor.rar
10-24
**UEditor：一个强大的Web富文本编辑器** UEditor是由百度开发的一款开源的Web富文本编辑器组件，专为前端开发者提供便捷、高效的文本编辑功能。...只需简单几步，就能为你的项目带来专业级别的文本编辑体验。
仿小米运动折线图
10-01
在"仿小米运动折线图"项目中，我们需要关注以下几个关键知识点： 1. **数据结构与处理**：首先，我们需要将运动数据组织成合适的数据结构，比如数组或列表，每个元素代表一个时间点的数据。这可能包括日期、步数、...
vue3.0引入字体样式ttf文件
freya_Du的博客
03-09 6200
vue3.0之后，就把build目录隐藏掉了，所以想要配置配置webpack.base.conf.js 文件很麻烦。 具体做法是： 1.下载ttf字体包，把包放在common下 2.在common文件夹下新建font.css文件，在其中引用字体文件并进行配置： @font-face { font-family: 'FZCYJ'; src: url('FZCYJ.ttf'); ...
vue 中使用自定义字体
lfalt的博客
09-06 6799
自定义字体
vue引入外部字体报错问题
BLUESKYHOST的博客
04-26 1356
报错的原因是路径导致的 目录结构 先上正确的写法 @font-face { font-family: 'ali'; src: url('/src/assets/font/Alibaba-PuHuiTi-Regular.ttf'); } 错误的写法 @font-face { font-family: 'ali'; src: url('../assets/font/...
在vue项目中引入typescript，vue + ts
qq_43305958的博客
08-20 2103
在vue项目中引入typescript，vue + ts一、typescript是什么？二、使用步骤1.引入库2.项目使用总结 一、typescript是什么？ TypeScript是 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 代码。由于最终在浏览器中运行的仍然是 ，所以 并不依赖于浏览器的支持，也并不会带来兼容性问题。 以下优点： 静态类型检查 IDE 智能提示 代码重构 可读性 二、使用步骤 1.引入库 代码如下（示例）： npm install -g typescript
【自用】Vue项目中使用自定义字体样式
qq_34378032的博客
01-11 4227
步骤一：拿到自定义字体包 ​ 首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。 步骤二：在项目文件夹中进行放置自定义字体包的配置 在项目assets文件夹下新建font文件夹，将拿到的字体包放在font文件夹中； 新建一个font.css文件 步骤三：font.css文件配置 ​ 在font.css文件中定义所用字体 @font-face { font-family: 'ZI DING YI'; /* 重命名字体名 */
一站式总结Vue项目中如何自定义文字样式
m0_48978227的博客
03-19 1959
在做数字化大屏的时候，数字展示如果用默认的字体影响整体的观感。所以最好要用有科技感的数字展示。纵观系统自带的字体包，都符合不了预期的效果。只能从现有的网站资源下载字体包，进行引用，然后用到对应想要改变的字体中。此总结可用于Vue中所有想要改变字体样式的情况。在对应想要改变的字体样式中使用刚刚在@font-face规则中定义好的引用名称。important;注意：如果当前根元素font-family样式元素权重很大，则需要加!important提高当前定义元素属性的权限。
vue中怎么引入字体包（超详细）
热门推荐
前端学习笔记
05-24 1万+
vue中怎么引入字体包 一、创建文件并添加字体包 1、在src里面的assets文件中创建text文件（没有assets文件可以自己创建一个，也可以不用此命名）； 2、把字体包放入text文件，并创建一个text.css文件（命名随意），把字体包引入text.css文件中，font-family建议使用英文。 text.css文件内容 @font-face { font-family: "JDZY"; src: url('./font.woff'); font-weight: no
Vue--引入字体图标的方式
eiai007的博客
09-17 2309
vue引入字体图标
vue项目 优先预加载自定义字体
11-24
为了优先预加载自定义字体，可以使用CSS的font-display属性。该属性可以控制字体的加载和显示方式。其中，swap值可以在自定义字体下载前先使用系统默认字体展示页面，等自定义字体下载完成再替换。具体实现步骤如下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值