vue引入下载的字体

已于 2023-08-22 14:00:45 修改
阅读量432 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
于 2023-05-18 17:12:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_63026743/article/details/130751092
本文介绍了在项目中添加自定义字体的步骤，包括在assets创建fontStyle文件夹，导入字体文件，新建index.css设置自定义字体家族，然后在main.js中引入样式文件，最后在代码中使用定义的字体名称。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.在assets下新建fontStyle文件夹。

2.将下载的字体导入

 3.新建index.css文件，添加

--font-family：自己起自己熟悉的名字；

‘123’只是用来演示

 4.在main.js中引入index.css

 5.使用自己起的名字即可

_Legend_King
关注
vue项目中引入外部字体（超详细）
weixin_42088314的博客
11-10 4522
1、创建一个conmon文件夹，再在其下创建一个fonts文件夹，用于存放字体文件，此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例，“FZQKBYSJW.ttf”为所下载的字体文件。 2、再在fonts文件夹下创建一个"font.css"文件，并写入样式（如下图）。 @font-face { font-family: "fzqkbysjt"; src: url('FZQKBYSJW.ttf') format('truetype'); font-weight: normal; f
Vue项目 css下载字体并引入使用
xiaoming4965的博客
01-15 1478
font.css。
Vue 艺术字体下载、设置
dyx001007的博客
11-10 3710
vue 艺术字体
Vue导入下载的字体文件
qq_22841387的博客
05-30 726
问题描述 现在我正在实现一个页面，字体是比较特殊的TecentSans W7.ttf，无法直接使用css样式中对应的font-family去使用 解决方法 1.下载字体文件 首先需要下载你所需要的显示的特殊字体文件，注意后缀名为.ttf 2将ttf文件放入项目中 这里我是在assets文件夹下新建了一个font文件夹 3.定义font-family 再在font文件夹中新建index.css文件，定义font-family @font-face { font-family: 'TencentSa
vue css下载字体并引入使用
ke_sin的博客
04-12 2490
1.下载字体 下载字体：https://www.fontke.com/ 下载之后复制里边的.ttf文件 2.在assets添加一个文件夹，里边放入.css 和.ttf文件 @font-face { font-family: 'TXWHZGBJT'; src: url('font.ttf'); font-weight: normal; font-style: normal; } 3.在App.vue里引入 @import "assets/font/font.css"; 4.在页面
vue项目引入字体.ttf的方法
12-09
5. **引入字体到Vue组件**：在你的Vue组件（如`App.vue`）中，通过`import`语句引入`font.css`： ```javascript import './common/font.css'; ``` 这样就将字体样式引入到了当前组件中。 6. **应用字体**：最后...
解决vue 项目引入字体图标报错、不显示等问题
10-18
在Vue项目中，引入字体图标是一项常见的操作，但有时可能会遇到一些问题，如报错或图标不显示。本文将详细解析这两个问题的原因及相应的解决策略。 首先，问题一：字体图标报错。当我们在Vue项目中尝试引入字体图标...
vue中引入第三方字体文件的方法示例
10-17
本篇文章将详细讲解如何在Vue项目中实现这一操作，包括下载字体文件、引入字体文件、配置Webpack以及解决可能出现的问题。 1. 下载字体文件 首先，你需要从网络上寻找并下载所需的字体文件。例如，你可能会选择华文...
关于在vue2中使用外部下载的字体
I_Allen_Liu的博客
08-29 696
2.新建index.css文件，如下配置。1.下载好所需的字体到该目录下。3.在main.js中引入。4.在项目页中写入该样式。
如何在vue中引入字体
Orange71234的博客
06-21 7916
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
vue 引入字体文件
weixin_50085094的博客
09-04 1679
【代码】vue 引入字体文件。
vue引入字体
weixin_51490706的博客
11-05 524
vue引入扩展字体.ttf格式 1.下载自己所需要的字体，文本格式为.ttf 2.在src下面的assets下边新建一个font文件夹 3.在font文件夹中新建一个font.css并且将下载好的字体复制进去(最好不要改名，下载是什么就是什么，我改了一下，不能用，重新下载了一下就可以了，如果自己找不到下载的字体可以找UI要) 4.在font.css中写入代码 @font-face{ font-family:"方正综艺简体";//这个是自己起的字体名 src: url("./方正综艺简体.t
VUE引入字体库
程序员劝退师的博客
09-02 520
前言 这个字体优化对于我这个做后端的有点深入了，虽然很简单，但是没干过还真不知道这玩意怎么弄，可能引入了也看不出什么效果。 下载字体包 这里提供一个下载的网站！虽然觉得不是很好用，但是勉强凑合，等有时间了问问我们公司专业的前端看看有什么其他的好的推荐下字魂 反正不管通过什么渠道下载，得到的字体资源如下 VUE导入 测试 只要是没有单独指定字体样式的都会默认采用这个样式！ ...
vue导入字体
yixiaojing527的博客
01-16 466
vue 本地添加字体
weixin_44870361的博客
05-08 1125
1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2.将字体文件引入 自己定义一个文件夹，放入下载好的.ttf文件 先自己定义一个font.css文件，将下载好的字体文件的路径引入 @font-face { font-family: "textxxx"; //重命名字体名称 src: url('s...
vue引入外部字体
xfmuchengxue的博客
07-15 1823
1、转换格式 将字体文件.otf格式 通过https://www.fontke.com/tool/convfont/压缩并转换为下图这几种格式 2.创建一个font.css引入转换后的文件 @font-face { font-family: 'SourceHanSansBold'; src: url('./bold/SourceHanSansCN-Bold.eot'); ...
vue项目使用外部字体
weixin_44801790的博客
07-06 2253
vue项目中使用外部字体，包括LED字体、图片字体等
Vue中引入外部字体
qq_42740298的博客
10-11 1429
vue引入第三方字体
vue+elementui 字体改用思源黑体
热门推荐
菜鸡奋斗ing的博客
08-21 1万+
微软雅黑存在版权问题，所以改用思源黑体， 实现步骤： 1，项目全局搜索微软雅黑相关的中英关键字，删除字体，包括在node_modules下的。 2.下载思源黑体字体库 https://download.csdn.net/download/u012138137/11587507 里面已经包含了通过font-face转换得到css字体样式 3.在index.html引入字体 注意问题：1.该字体是放...
vue 引入kern字体
最新发布
04-15
### 如何在 Vue 项目中正确引入和使用 Kern 字体 要在 Vue 项目中正确引入并使用 Kern 字体，可以参考以下方法： #### 创建 `@font-face` 定义 通过 CSS 的 `@font-face` 规则来定义自定义字体。以下是基于已有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值