关于在vue2中使用外部下载的字体

于 2024-08-29 10:09:07 发布
阅读量173 收藏
点赞数 5
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_Allen_Liu/article/details/141671427
版权

        当前端根据ui设计稿，要实现外部字体时，我们使用如下方法：

        1.下载好所需的字体到该目录下

        

        2.新建index.css文件，如下配置

        3.在main.js中引入

        

        4.在项目页中写入该样式

        

        查看效果：

        

又写了一天BUG
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中使用外部字体
蜗牛~~
05-11 1032
在页面中使用，直接用font-family后面跟上你在font.css中定义的名称即可。或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~在vue项目中的assets文件夹下，新建一个font文件夹，将这四个文件放进去。在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮。然后再新建一个font.css文件，里面编写字体变量。首先要找一个免费网站，去下载你想用的字体，推荐。然后再main.js中引入font.css。下载完事之后再解压，是对应字体的四种类型。
vue如何使用外部特殊字体的操作
10-15
在Vue组件中使用自定义字体非常简单，只需在需要的地方设置`font-family`属性即可。例如： ```html 优设标题', sans-serif;">这里是使用特殊字体的文字 ``` 确保在`font-family`中列出一个备选字体，以防用户设备不...
在vue项目中使用外部字体
巴黎的雪铺满赫尔本的街的博客
12-09 696
1、去网上下载需要的 ttf 字体文件放入项目中； 2、在styles文件夹下新建一个font.css(font.scss)文件；并编辑 @font-face { font-family: number; //用法：font-family:number src: url("./number.ttf"); //字体文件路径 font-weight: bold; font-style: normal; } 3、将font.scss直接引入main.js文件中;或者直接在对应
Vue中 引入外部字体并使用
weixin_61710685的博客
03-17 1796
第二步：在src文件夹下新建fonts文件夹，将下载的字体文件放进去，并且新建fonts.css文件夹。第三步：fonts.css文件中引入想要的字体；第四步：main.js中引入。在vue2中引入外部字体。
vue中引入外部字体包
weixin_65767506的博客
02-23 323
在font.css文件中,font-family为自定义字体名字方便引入的时候使用,scr为引入字体包的名称。ttf一般为字体包,在src下新建 common 文件夹,把字体包放进来。3.在需要使用的地方先引入再使用。
vue项目使用外部字体
weixin_44801790的博客
07-06 2153
vue项目中使用外部字体，包括LED字体、图片字体等
vue项目引入外部字体使用
小刘的日常bug记录
06-01 297
发现一个字体库，里面字体还挺好看的。
Vue中引入外部字体
weixin_52630329的博客
04-10 757
项目开发过程中，系统自带的字体通常美观性没那么强，所以有时候就需要我们自己引入字体包，来实现各种个性字体的效果，以下就是在vue项目中如何引入外部字体包并使用的方法。在assets下创建一个font文件夹，把下载的字体文件放到文件夹下。使用的时候直接写font-family就可以使用配置字体了。创建一个font.css文件用于定义这个字体包的名字。然后在App.vue的css中将这个css文件引入。
Vue使用外部字体 font
localhost
10-17 302
文章目录1. 下载字体文件2. 将字体文件导入项目中3. 新建fonts.css文件4. 在项目的main.js文件中引入刚写好的css文件，路径记得对应上自己项目中的路径5. 直接在vue文件中的样式添加字体样式 1. 下载字体文件 2. 将字体文件导入项目中 看自己的需求放置 例如: assets > fonts 目录下 3. 新建fonts.css文件 在assets > fonts 目录下,新建fonts.css文件, 并引入想要的字体 /* 这是fonts.css 可以设置多
(vue)vue项目中引入外部字体
nyf_unknow的博客
07-24 578
效果： 解决参考：https://blog.csdn.net/weixin_52630329/article/details/130069185
在vue中更换字体,本地存储字体非引用在线字体库的方法
10-17
如果你只想在特定组件中使用新字体，可以在该组件的样式表中设置`font-family`属性。 总结一下，要在Vue中更换字体并本地存储字体文件，你需要： 1. 下载字体文件并放置于项目目录。 2. 在`main.js`中导入字体文件...
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 331
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
谷歌、火狐及Edge等浏览器如何使用allWebPlugin中间件响应ActiveX插件事件
云开软件工作室
08-25 613
如何通过allWebPlugin中间件技术，在谷歌、火狐、Edge及360等浏览器中响应ActiveX控件的事件。JavaScript调用PluginHostCnt类RegisterEvent方法，注册需要响应的控件事件，如果需要响应多个事件，事件与事件之间通过分号（;）隔开；使用JavaScript编写事件响应函数，响应函数参数需要与ActiveX控件事件函数参数一致。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1382
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
浏览器精度问题
m0_46281382的博客
08-25 528
浏览器如何解析后端返回的long类型的数据
前端：篮球投掷动画
懒羊羊大王的博客
08-23 1080
使用 H5 和 CSS3 实现的一个篮球投掷动画。 玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
WebRTC 实时通信：构建高效网页视频通话的秘诀
liuxin33445566的博客
08-24 686
WebRTC 是一个开源项目，由Google于2010年启动，旨在通过简单的API实现浏览器间的实时音视频通信。它允许开发者在网页应用中轻松集成音视频通话、文件共享、屏幕共享等功能。
在vue中引入外部css链接
03-29
1. 在vue组件中使用import引入外部css文件： 在需要使用外部css文件的vue组件中，使用import语句将外部css文件引入： ```javascript import '@/assets/css/external.css' ``` 这里的`@`表示项目根目录，`assets/css/external.css`是外部css文件的路径。 2. 在vue组件中使用link标签引入外部css文件： 在vue组件的`<template>`标签中使用link标签将外部css文件引入： ```html <template> <div> <!-- 组件内容 --> </div> </template> <style> @import url('https://fonts.googleapis.com/css?family=Roboto'); </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> ``` 这里的`@import`语句用于引入谷歌字体库中的一种字体，`<link>`标签用于引入animate.css库中的样式文件。注意，`<style>`标签中的@import语句也可以引入外部css文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值