vue3中使用外部字体

最新推荐文章于 2024-08-29 10:09:07 发布
最新推荐文章于 2024-08-29 10:09:07 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： vue.js javascript vue中使用外部字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/130626424
版权
本文介绍了如何在Vue3项目中使用外部字体。首先从免费网站如DaFont下载字体，然后在项目assets文件夹下创建font文件夹存放字体文件，并创建font.css定义字体变量。最后在main.js中引入font.css，并在页面中通过font-family使用定义的字体。
摘要由CSDN通过智能技术生成

首先要找一个免费网站，去下载你想用的字体，推荐 DaFont - Download fonts

或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~

如果是进入网站下载的话，操作步骤如下：

在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮

 点击下载即可

了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
专栏目录
订阅专栏
vue3 -- 项目使用自定义字体font-family
King Saj
04-18 1369
引入字体文件： 首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/fonts/。在全局样式中定义字体： 在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。
vue如何使用外部特殊字体的操作
10-15
在Vue组件中使用自定义字体非常简单，只需在需要的地方设置`font-family`属性即可。例如： ```html 优设标题', sans-serif;">这里是使用特殊字体的文字 ``` 确保在`font-family`中列出一个备选字体，以防用户设备不...
vue3（基于vite）项目初始基本配置
白的夜的博客
06-17 8055
从零开始带你一步步搭建一个完整的vue项目配置
关于在vue2中使用外部下载的字体
I_Allen_Liu的博客
08-29 510
2.新建index.css文件，如下配置。1.下载好所需的字体到该目录下。3.在main.js中引入。4.在项目页中写入该样式。
Vue3 如何引入第三方字体
HaushoLin的博客
12-02 5067
本次采用的免费字体是阿里巴巴的iconfont，商用免费的，废话不多说，开始今天的教程。
Vue3引用外部TTF字体，其实很简单！
m0_51390969的博客
12-09 1778
就是你自定义字体的名字。
Vue中引入外部字体
qq_42740298的博客
10-11 1376
vue引入第三方字体
vue项目使用自定义字体，不同浏览器环境使用不同字体
donghua201的博客
09-28 4055
3、在入口文件main.js中引入 4、在 Vue 项目中使用该自定义字体 使用后端提供的线上字体地址 本地字体文件一般都是几十M上百M，会让项目打包文件变得很大，建议让后端把字体文件放在服务器，使用线上字体。
Vue3中引入外部自定义字体
04-20 3989
免费商用字体下载（中文字体、繁体字体、英文字体、日文字体、韩文字体），含有授权说明，不定期更新，诚信分享。将下载的ttf文件放到 src/assets/font 文件夹中。
在vue中更换字体,本地存储字体非引用在线字体库的方法
10-17
如果你只想在特定组件中使用新字体，可以在该组件的样式表中设置`font-family`属性。 总结一下，要在Vue中更换字体并本地存储字体文件，你需要： 1. 下载字体文件并放置于项目目录。 2. 在`main.js`中导入字体文件...
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vue中引入第三方字体文件的方法示例
12-11
在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者...
vue3----解决字体包太大响应慢以及打包文件大的问题 && 解决font-spider 报错问题
heavenz19的博客
07-03 2350
使用font-spider压缩字体（亲测可用）
vue：引入字体
ScumStudy的博客
11-17 347
1、在 src 目录下的 assets 的新建 fonts文件夹，然后在加要显示的字体 2、再建一个文件夹，引入字体 3、在mian.js全局引入
Vue项目引入自定义字体
DIWUCH的博客
05-10 2026
vue引入自定义字体的具体操作
vue项目中引入自定义字体
tzz_1122的博客
01-24 681
获取ttf字体文件。可以从各种免费或付费字体库中下载，也可以从已有的设计稿中提取出来。在CSS中定义@font-face规则，并将字体文件引入。将ttf字体文件复制到项目中。
vue3项目中引入字体文件
jyl4855的博客
01-16 1659
在CSS中引入字体，全局样式中引入字体，确保路径./assets/fonts/SourceHanSansCN-Regular.otf与你放置字体文件的实际路径相匹配。将这些字体文件引入到vue3项目中 ，统一放在assets文件夹的fonts下，这个是全局使用，批量写入，然后批量使用。最后引入到main.js文件中即可。
如何在vue3中引入字体
qdxxxniao的博客
07-22 2635
【代码】如何在vue3中引入字体。
vue项目中引入外部字体
最新发布
10-13
在Vue.js项目中引入外部字体通常需要通过以下步骤： 1. **下载字体文件**：首先从网络上或者其他来源下载所需的字体文件，通常是.TTF、.OTF或WOFF格式。推荐将字体文件放在项目的`static`目录下，因为这是一个安全的位置，且会被静态资源服务器自动处理。 2. **添加到CSS**：创建一个专门用于加载字体的新CSS样式表或将其合并到现有的全局CSS文件中。然后在CSS里，你可以像下面这样设置@font-face规则： ```css @font-face { font-family: 'YourFontName'; src: url('/fonts/your-font-file.ttf') format('truetype'); /* 或者其他格式如woff, woff2 */ font-weight: normal; font-style: normal; } ``` 这里将`YourFontName`替换为你想要的字体名称，`'/fonts/your-font-file.ttf'`替换为实际的字体文件路径。 3. **使用字体**：在Vue组件的模板中，或者全局样式中引用这个新定义的字体： ```html <p style="font-family: YourFontName;">这是一段使用了外部字体的文字</p> ``` 4. **确保跨域加载**：如果字体文件来自外部服务器，并且该服务器设置了CORS策略限制，你需要在服务器端设置允许跨域请求，或者使用CDN服务来避免这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值