vue3 -- 项目使用自定义字体font-family

已于 2024-04-18 15:54:33 修改
阅读量2.3k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 项目实操 Vue 文章标签： vue.js 前端 javascript
于 2024-04-18 15:18:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44412840/article/details/137922697
本文介绍了在Vue 3项目中如何引入和使用自定义字体。首先将字体文件放在src/assets/font/目录下，然后在全局样式文件如App.vue中使用@font-face规则定义字体，接着在组件中通过font-family引用。确保全局注册样式文件，以便所有组件都能访问定义的字体。同时，提供了海量字体资源的下载信息，适用于商业用途。

在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。可以按照以下步骤进行操作：

  1. 引入字体文件： 首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/font/。
    在这里插入图片描述
  2. 在全局样式中定义字体： 在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。
@font-face {
   
   
  font-family: PangMen; //  font-family:
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue3中使用外部字体
蜗牛~~
05-11 1390
在页面中使用，直接用font-family后面跟上你在font.css中定义的名称即可。或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~在vue项目中的assets文件夹下，新建一个font文件夹，将这四个文件放进去。在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮。然后再新建一个font.css文件，里面编写字体变量。首先要找一个免费网站，去下载你想用的字体，推荐。然后再main.js中引入font.css。下载完事之后再解压，是对应字体的四种类型。
Vue3 中引入液晶数字字体（通常用于大屏设计）
Siona_xin 的博客
08-22 2084
配置文件中已经配置好了，直接如上步骤使用即可，若是其他框架则需要检查一下。配置文件中以下配置是否包括。‼️注意：本项目使用的是。
vue3项目中引入字体文件
jyl4855的博客
01-16 2318
在CSS中引入字体，全局样式中引入字体，确保路径./assets/fonts/SourceHanSansCN-Regular.otf与你放置字体文件的实际路径相匹配。将这些字体文件引入到vue3项目中 ，统一放在assets文件夹的fonts下，这个是全局使用，批量写入，然后批量使用。最后引入到main.js文件中即可。
vue3引入iconfont字体图标库的使用
最新发布
qq_16737187的博客
07-16 347
本文介绍了iconfont图标库在web端的symbol引用方法。首先需要拷贝项目symbol代码到本地文件，然后封装可复用的SvgIcon组件，通过use标签引用图标。接着在main.js中全局注册该组件，最后在页面中即可通过icon-name属性使用图标。这种方法实现了图标的按需引用，支持自定义样式，是平台推荐的使用方式。
在项目中使用自定义字体
奇怪的人类
01-09 500
在项目中创建一个文件夹，用于放字体资源文件。
vue3项目使用自定义字体font-family
m0_66975650的博客
02-07 5451
百度想要的字体包（后缀名为.ttf, .otf, .eot等格式的字体包）在项目assets文件下新建 font 文件夹。font.css文件添加如下代码。APP.vue中引入即可生效。把符合格式的字体包也放这。新建font.css文件。改变自己想要的全局字体。
jeecgboot-vue3使用自定义字体
y199710的博客
03-17 262
【代码】jeecgboot-vue3使用自定义字体。
Vue3中引入外部自定义字体
04-20 5854
免费商用字体下载（中文字体、繁体字体、英文字体、日文字体、韩文字体），含有授权说明，不定期更新，诚信分享。将下载的ttf文件放到 src/assets/font 文件夹中。
vue-quill-editor 自定义字体font-family
且听风吟的博客
09-06 1637
定义字体： let fontFamily = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']; Quill.imports['formats/font'].whitelist = fontFamily; Quill.register(Quill.imports['formats/font']) 修改 toolbar工具栏中的 font：[{ 'fon
文本，Vue-Quill-Editor 设置编辑器中文字的默认字体大小，自定义文字字号
weixin_54048131的博客
03-12 5082
Vue-Quill-Editor 设置编辑器中文字的默认字体大小_quill 初始 字体-CSDN博客 [{'size':fontSize}]toolbar工具栏 第三步：CSS样式文件加上这句话 这里借鉴了＊且听风吟的资料，感谢大佬的资料，以上就是置编辑器中文字的默认字体大小，自定义文字字号的方法 最后效果：
vue-quill-editor 自定义文字字号
且听风吟的博客
10-23 2030
默认的 vue-quill-editor 富文本编辑器的字号选择很少，只有默认的几种。 需求是设置默认字体大小。
Vue.js中全局替换字体及font-family的实践
weixin_62428445的博客
07-18 2326
首先，你需要将自定义字体文件（如.ttf.woff.woff2等格式）添加到项目的静态资源目录，通常是src/assets下。对于字体图标，如Font Awesome或Iconfont，你同样需要将图标库的字体文件添加到项目中，并在CSS中定义使用规则。
vue3导入字体
weixin_42348009的博客
12-26 1588
format：指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
Vue3 让用户高度自定义文本内容
weixin_51878863的博客
11-19 129
【代码】让用户高度自定义文本内容。
Vue3引用外部TTF字体，其实很简单！
m0_51390969的博客
12-09 2694
就是你自定义字体的名字。
【Nuxt3】vue3+tailwindcss+vuetify引入自定义字体样式
qq_43813351的博客
07-12 1262
在项目中引入自定义的字体样式（全局页面都可使用）
vue2 vue3 中使用字体文件
Ll307748784的博客
08-15 492
第三步在main.js 引入字体文件包。第一步先创建 font 文件。第二步进行引入注册字体文件。
vue3项目引入自定义字体
Noctis99的博客
05-30 1733
下载字体文件 创建文件夹
如何在vue3中引入字体
qdxxxniao的博客
07-22 3127
【代码】如何在vue3中引入字体。
vue font-family
01-10
<div class="custom-font">这里是应用了自定义字体的内容 // 组件逻辑... @import &#39;./assets/font/customFont.css&#39;; .custom-font { font-family: &#39;CustomFont&#39;, sans-serif; } ``` 此方法适用于仅需改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Kingsaj

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

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

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

打赏作者

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

抵扣说明：

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

余额充值