在vue中使用自定义字体

最新推荐文章于 2024-07-07 00:45:46 发布
最新推荐文章于 2024-07-07 00:45:46 发布
阅读量313 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52921391/article/details/115955709
版权

先看图，像16这样的数字的字体是自定义的，下面写怎么实现的

首先你得去下载一个字体包，也可以让ui给你
我是和ui要的，是otf格式，别的字体格式应该也行的
下载的路径我是在public里和img平级就行，我新建的一个fonts的文件夹

然后去写样式，我是专门用一个文件夹写全局通用样式和全局字体样式的

样式内容如下：

然后在main.js里引入这个样式

//main.js
import '../assets/css/fonts.css'

然后就可以直接用了

是小芬达啊
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 -- 项目使用自定义字体font-family
King Saj
04-18 845
引入字体文件： 首先，确保你的字体文件（通常是.woff、.woff2、.ttf等格式）位于项目中的某个目录下，比如src/assets/fonts/。在全局样式中定义字体： 在你的全局样式文件中（通常是App.vue或者一个单独的样式文件），使用@font-face规则引入字体文件，并定义字体名称。在Vue 3项目中使用自定义字体（font-family）的方法与在普通的HTML/CSS项目中类似。
vue 引用自定义ttf、otf、在线字体的方法
01-19
1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，...3. 在项目中（mai
Vue中使用自定义字体
RR_chen的博客
04-24 4136
为了美观效果，不想使用默认字体，使用其他好看的字体，此时在项目中就需要： 创建 assets/fonts/font.less @charset "UTF-8"; @font-face { font-family: 'zkwyt'; src: url('./zkwyt.ttf'); } 将字体文件 zkwyt.ttf 放 assets/fonts 文件夹中。 在 App.vue 引入 font.less <style> @import './assets/fonts/font.
在Vue项目中使用自定义字体的操作步骤
最新发布
云加速
07-07 178
（如果需要）：如果你的Vue项目使用的是Webpack作为构建工具，你可能需要配置Webpack来正确处理字体文件。：如果你的字体文件存储在CDN或外部服务器上，确保服务器配置了适当的CORS（跨源资源共享）策略，以允许你的Vue应用加载字体文件。：在浏览器中打开你的Vue应用，检查是否正确加载并使用了自定义字体。：考虑使用字体子集化和加载策略，比如仅加载用户需要的字符集，或者使用。：将字体文件复制到你的Vue项目中。：首先，你需要拥有你想要使用的字体的文件。：在你的Vue组件中，你可以使用。
vue 中使用自定义字体
lfalt的博客
09-06 6848
自定义字体
Vue使用自定义字体
ScoloveCode的博客
01-19 2280
vue使用自定义字体 1.新建一个文件夹,放在assets下.然后把字体文件引入到文件夹里,这个文件夹是存放字体文件的,根据个人喜好命名 2.在assets/css下新建一个font.css文件 @font-face { font-family: "苹方"; src: url("../tff/PingFang Regular.ttf"); font-weight: normal; font-style: normal; } 3.在App.vue文件中使用 <style lang="l
Vue使用font-face自定义字体详解
蓑笠翁
03-23 3187
包含font-face使用详解，以及vue中自定义字体详解
vue使用自定义icon图标的方法
08-27
本文主要介绍了在 Vue 中使用自定义的 Icon 图标的方法。自定义 Icon 图标可以丰富 Vue 项目的视觉体验，为用户提供更加直观的交互方式。下面将详细介绍两种使用自定义 Icon 图标的方法：使用 Iconfont 和使用 ...
vue项目中应用ueditor自定义上传按钮功能
08-27
Vue项目中应用ueditor自定义上传按钮功能...本文通过示例讲解了Vue项目中应用ueditor自定义上传按钮功能，以及在Vue项目中使用ueditor的基本步骤。希望这篇文章能够帮助读者更好地理解和使用ueditor在Vue项目中的应用。
解决在vue项目中webpack打包后字体不生效的问题
10-18
4. **使用@font-face**：另一种方法是通过`@font-face`规则将字体文件引入项目，然后在CSS中引用。这种方法可以确保字体文件与CSS一起打包，并在需要时加载。 总的来说，解决Vue项目中Webpack打包后字体不生效的...
vue如何使用外部特殊字体的操作
10-15
在Vue组件中使用自定义字体非常简单，只需在需要的地方设置`font-family`属性即可。例如： ```html 优设标题', sans-serif;">这里是使用特殊字体的文字 ``` 确保在`font-family`中列出一个备选字体，以防用户设备不...
vue项目使用自定义字体，不同浏览器环境使用不同字体
donghua201的博客
09-28 3913
3、在入口文件main.js中引入 4、在 Vue 项目中使用该自定义字体 使用后端提供的线上字体地址 本地字体文件一般都是几十M上百M，会让项目打包文件变得很大，建议让后端把字体文件放在服务器，使用线上字体。
vue 使用自定义字体
Demo_Null
07-25 3691
在开发中碰到需要使用特殊字体的需求，记录一下 vue 怎么使用自定义字体
vue 使用自定义的字体风格文件
weixin_43294560的博客
10-26 497
1、在app.vue的css中引入 @font-face { font-family: xx; src: url(../static/font/DS-DIGIT.TTF); } 2、使用 font-family:xx; 3、若报错,配置完下方步骤后重启 在build/webpack.base.conf.js中的module:{rules:[]}中添加文件对应后缀的匹配规则 如: ...
【自用】Vue项目中使用自定义字体样式
qq_34378032的博客
01-11 4277
步骤一：拿到自定义字体包 ​ 首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。 步骤二：在项目文件夹中进行放置自定义字体包的配置 在项目assets文件夹下新建font文件夹，将拿到的字体包放在font文件夹中； 新建一个font.css文件 步骤三：font.css文件配置 ​ 在font.css文件中定义所用字体 @font-face { font-family: 'ZI DING YI'; /* 重命名字体名 */
Vue引入自定义字体
qq_60542647的博客
04-19 772
创建global.css文件。在main.js中引入。2.在需要的地方使用。3.整个项目中使用（
vue实现自定义字体
m0_56666791的博客
11-03 973
网址选择想要的字体之后下载获取文件夹内的.ttf文件。
在vue项目中使用自定义字体
weixin_44692296的博客
03-16 611
1.首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包 2.在项目assets下创建一个font文件夹 如图： 3.在font.css中定义你使用的字体 如图： 4.在main.js引入字体 5.引入之后，你就可以直接在项目中使用了。因为我们是整个项目都用这个字体，我是直接在App.vue中使用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值