vue特殊字体的使用

最新推荐文章于 2024-03-23 23:21:16 发布
最新推荐文章于 2024-03-23 23:21:16 发布
阅读量478 收藏 10
点赞数 9
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81331526/article/details/135689532
版权

1、在assets中新建DINfont文件夹，将字体文件DS-DIGIB.TTF放置到该文件夹下

2、引入字体并定义

@font-face{
    font-family: "fontb";
    src: url(../../../assets/DINfont/DS-DIGIB.TTF);
}

3、使用

.font {
    position: absolute;
    top: 40px;
    left: 55px;
    display: inline-block;
    font-family: fontb;
}

4、css设置字体渐变

font-family: fontb;
font-size: 36px;
font-weight: bold;
color: rgba(255, 255, 255, 1);

background: linear-gradient(0deg, rgba(255, 80, 51, 1) 0%, rgba(255, 255, 255, 1) 38.4765625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

最终实现效果：

Code female artist
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue如何使用外部特殊字体的操作
10-15
主要介绍了vue如何使用外部特殊字体的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE 截取字符串的方法
07-30
适合刚刚进入(JavaScript，Vue)编程领域的小白使用
vue项目中使用特殊字体的步骤
发渐稀的博客
09-14 410
然后把该文件放到src -> assets -> fonts -> 目录下，并在当前目录里新建一个fonts.css文件，把字体文件在该文件中声明。在项目中使用特殊字体，需要注意，所使用的特殊字体是否被允许商用或是个人开发，以及如何使用，切记不要侵权。首先需要在对应字体网站下载字体文件，取出里面后缀名为.ttf的文件。再然后就在main.js文件中全局声明fonts.js文件。最后在需要使用特殊字体的地方直接引用即可。
vue中使用特殊字体
javaScript_want的博客
12-04 586
1.在src目录下创建一个font文件夹放入下载好的字体文件 2.对应位置样式文件写好以下内容 @font-face { font-family: 'PangMenZhengDao'; src: url('./FZBWKSJW.ttf'); } 3.在对应组件中使用 ...
Vue 使用特殊字体
weixin_44240581的博客
05-29 310
// App.vue ... <style lang="less"> @font-face { font-family: "BebasNeue"; src: url("./font/BebasNeue.otf"); font-weight: normal; font-style: normal; } </style>
vue中使用其他字体
weixin_44177413的博客
07-05 249
然后在src->assets->css->新建一个css文件。首先把字体文件放入public static里面。内容就是导入上面的字体文件并命名。然后在main.js中引入。最后像这样使用就可以啦。
引入特殊字体
黎成诃月的博客
05-23 715
@font-face {    font-family: digifacewide;    src: url(../font/digifacewide.ttf);}
vue+element项目中过滤输入框特殊字符小结
10-16
在使用Vue.js框架结合Element UI库进行前端开发时，经常会遇到需要对输入框中的内容进行特殊字符过滤的场景。本文详细介绍了在vue+element项目中如何过滤输入框中的特殊字符，并通过实例代码展示了如何实现这些过滤...
vue项目中引入特殊字体
08-06 541
特殊字体指的是默认电脑中没有的 1、下载字体 2、新建文件夹font，把字体放进去 3、新建font.css 4、使用@font-face设置字体 @font-face { font-family: 'txchj'; // txchj 我自己定义的 src: url("~@/assets/font/txchj.ttf"); // 路径自己调整 } ...
vue引入字体
qq_43840793的博客
10-30 466
这个与两个字体，优设标题黑和DIN字体，font.css用于给字体取名，将字体引入网站。1、在src/assets文件夹下新建一个font文件夹，放入字体文件与配置文件。在main.js引入。
Vue3 中引入液晶数字字体（通常用于大屏设计）
Siona_xin 的博客
08-22 1652
配置文件中已经配置好了，直接如上步骤使用即可，若是其他框架则需要检查一下。配置文件中以下配置是否包括。‼️注意：本项目使用的是。
在Windows Phone 8 中如何使用第三方字体
岁月无情
04-17 2447
1、引入字体文件如下，并将字体的Build Action设置为Content 2、如下引用： FontFamily="/Assets/Fonts/DS-DIGIB.TTF#DS-Digital" #号后面是字体的名称，前面是字体文件的路径，若BuildAction为Resource，则为： Value="/PhoneApp1;component/Fonts/...
数字标题动态以及电子屏数字
pyf18809486818的博客
11-03 387
电子化数字展示效果
Vue使用font-face自定义字体详解
最新发布
蓑笠翁
03-23 3117
包含font-face使用详解，以及vue中自定义字体详解
vue 中使用自定义字体
lfalt的博客
09-06 6842
自定义字体
vue 引入字体文件
weixin_44535797的博客
05-15 2674
引入字体文件 1、将字体文件拷贝到assets/ttf文件夹下。 2、在assets/css文件夹下新建font.css文件，在其中引用字体文件： @font-face { font-family: "DS-DIGII"; src: url('../ttf/DS-DIGII.TTF'); font-weight: normal; font-style: normal...
为项目加入第三方字体DS-Digital，并使用
weixin_45294459的博客
06-06 3015
前端项目中经常使用到各种各样的字体样式，此处以DS-Digital为例，先放效果图，1、DS-Digital字体资源，在如下链接中下载，然后解压链接: https://pan.baidu.com/s/1yG-asAfmqAN96UTXsXW9Iw 提取码: ex98 复制这段内容后打开百度网盘手机App，操作更方便哦2、将解压后的文件放入项目根目录，如下 3、在需要文件中引入，此处写了一个demo 直接使用style="font-family: DS-Digital;"就可以使用...
vue项目使用外部字体
weixin_44801790的博客
07-06 2148
vue项目中使用外部字体，包括LED字体、图片字体等
HTML5游戏开发–第2课
cukengwei3786的博客
08-06 168
HTML5 Game Development – Lesson 2. Today we continue a series of articles on game development in HTML5. Today we will continue basics (and maybe even advanced basics). I going to show you how to fill ...
vue校验输入框不能输入特殊字符
05-25
你可以使用Vue.js的指令和正则表达式来实现校验输入框不能输入特殊字符的功能。例如，你可以在输入框上绑定一个v-on:input事件监听输入内容，然后在事件处理函数中使用正则表达式判断输入内容是否包含特殊字符，如果...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Code female artist

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

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

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

打赏作者

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

抵扣说明：

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

余额充值