vue项目中引入想要的字体

最新推荐文章于 2024-03-23 23:21:16 发布
最新推荐文章于 2024-03-23 23:21:16 发布
阅读量303 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39598092/article/details/102783525
版权

把想要的字体ttf文件放到assets文件中的fonts中 在css中创建font.css 引入文件夹中你想要的字体 起名字 

在vue文件中是用

首先引入font.css    

import "@/assets/css/font.css";

在使用的地方 

这样使用就可以了 如果刷新页面字体没有变化 请重新npm run dev启动项目

 

注意：存放字体文件的文件夹一定要起fonts 要不打包之后会找不到文件的

 

闲人有点忙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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项目引入字
vue项目中引入字体
qq_39598092的博客
06-26 1161
1：首先在assets文件夹中创建一个fonts文件里面放上你想加的字体文件（类似FZBWKSJW.ttf格式）； 2：在css文件中创建一个font.css中写入 @font-face { font-family: 'my-font2'; src: url('../fonts/FZBWKSJW.ttf'); } 3：在需要用的文件中引入 import '@/assets/cs...
如何在vue中引入字体
Orange71234的博客
06-21 7502
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
一站式总结Vue项目中如何自定义文字样式
m0_48978227的博客
03-19 2231
在做数字化大屏的时候，数字展示如果用默认的字体影响整体的观感。所以最好要用有科技感的数字展示。纵观系统自带的字体包，都符合不了预期的效果。只能从现有的网站资源下载字体包，进行引用，然后用到对应想要改变的字体中。此总结可用于Vue中所有想要改变字体样式的情况。在对应想要改变的字体样式中使用刚刚在@font-face规则中定义好的引用名称。important;注意：如果当前根元素font-family样式元素权重很大，则需要加!important提高当前定义元素属性的权限。
Vue使用font-face自定义字体详解
蓑笠翁
03-23 3051
包含font-face使用详解，以及vue中自定义字体详解
vue中引入第三方字体文件的方法示例
10-17
本篇文章将详细讲解如何在Vue项目中实现这一操作，包括下载字体文件、引入字体文件、配置Webpack以及解决可能出现的问题。 1. 下载字体文件 首先，你需要从网络上寻找并下载所需的字体文件。例如，你可能会选择华文...
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为...以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
解决在vue项目中webpack打包后字体不生效的问题
10-18
4. **使用@font-face**：另一种方法是通过`@font-face`规则将字体文件引入项目，然后在CSS中引用。这种方法可以确保字体文件与CSS一起打包，并在需要时加载。 总的来说，解决Vue项目中Webpack打包后字体不生效的...
vue中导入字体与全局设置默认字体
m0_56983341的博客
02-13 498
vue设置全局字体
Vue修改默认字体
mingY的博客
10-18 2870
1.在assets文件夹下创建文件夹，命名为font 2.在font文件夹中新建文件：font.css @font-face { font-family: "pingFangSC-Medium"; src: url("./PingFangMedium_0.ttf"); font-weight: normal; font-style: normal; } 3.下载字体包 4.App.vue文件中使用 <style rel="stylesheet/...
在vue中更换字体,本地存储字体非引用在线字体库的方法
10-17
今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中引入外部字体
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
vue中引入字体
weixin_40856652的博客
06-30 8805
vue中引入字体
vue-element-admin 修改默认的全局字体尺寸为mini
极客星云-CSDN博客
02-18 1万+
vue-element-admin 修改默认的全局字体尺寸为mini
vue中引入字体包
m0_58565372的博客
08-02 5524
1.创建文件夹 存放字体 在src目录下创建text文件夹 ，字体放在这个文件夹下,命名为字体名（英文更好），并且创建text.scss。有时候UI上面会有一些特殊字体，这时候，你就可以将UI给你的字体包引入到自己的项目中，去实现特殊字体的处理。2.在text.scss里面写入。3.在main.js中引入。4.直接在自己需要的页面使用。以上步骤就可以实现引入字体包。...
vue 中引入使用其他字体
小羽向前跑
04-30 5093
1 .在src下新建文件夹common，将字体文件放入 2.在common文件中新建font.css @font-face { font-family: 'SourceHanSans'; //自定义文字名 src: url('./SourceHanSansCN-Normal.otf'); //路径引入文字 font-weight: normal; ...
全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
热门推荐
qq_25007459的专栏
10-31 2万+
1、下载所需要的字体，.ttf格式本文以（PingFang.ttf 为例） 底下将会附加苹果方体-简易黑体PINGFANG MEDIUM.tff 可自行下载其他字体样式，全局引用，方便快捷。 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...
Vue-Quill-Editor 设置编辑器中文字的默认字体大小
且听风吟的博客
09-09 2230
Vue-Quill-Editor 回显时不显示空格 Vue-Quill-Editor 默认字体看起来有些小，如下： 设置默认字体大小： .ql-container { // 设置默认字号 font-size: 16px; } 设置之后：
vue 中 改表单select 的默认样式字体色；
onlylele的博客
12-25 5935
html:<div class="van-field__body"> <select v-model="entity.role_id" @change="roleIdSelect" class="van-field__control partner-selc" :class="{'font-metud':selected}"> <...
vue项目中引入icon图标
最新发布
05-06
在Vue项目中引入图标有多种方式，以下是其中两种常用的方式： . 使用第三方图标库：可以使用一些流行的第三方图标库，如Font Awesome、Material Design Icons等。首先需要在项目中安装相应的图标库，可以使用npm或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值