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

最新推荐文章于 2025-06-25 09:55:28 发布
最新推荐文章于 2025-06-25 09:55:28 发布
阅读量695 收藏 1
点赞数 7
CC 4.0 BY-SA版权
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/I_Allen_Liu/article/details/141671427

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

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

        

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

        3.在main.js中引入

        

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

        

        查看效果：

        

Vue中引入外部字体
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
vue2关于引入字体的步骤
gaoyapei1993的博客
03-24 1615
vue
Vue中 引入外部字体并使用
weixin_61710685的博客
03-17 2265
第二步：在src文件夹下新建fonts文件夹，将下载的字体文件放进去，并且新建fonts.css文件夹。第三步：fonts.css文件中引入想要的字体；第四步：main.js中引入。在vue2中引入外部字体。
vue项目中引入别的特定字体
最新发布
m0_63026408的博客
06-25 365
摘要 在项目开发中，经常需要引入特定字体。本文介绍了将自定义字体应用到项目的简易方法：首先将字体文件放入项目目录；然后在全局文件（如App.vue）中引用字体；最后在具体文件中通过HTML标签或CSS样式使用该字体。这种分步操作确保字体在整个项目中统一应用，既简单又高效。
vue 引入字体文件
weixin_50085094的博客
09-04 1673
【代码】vue 引入字体文件。
vue2项目中添加字体文件
yangyanqin2545的博客
12-05 743
1、下载相关文件，放置文件夹中，这里我是在assets文件中新建了fontFamily。经过以上操作，就可以看到页面中字体样式发生了变化。2、在assets文件中新建css文件。
Vue 引入字体文件
2401_84868241的博客
05-08 777
Vue 引入字体文件
vue如何使用外部特殊字体的操作
10-15
在Vue组件中使用自定义字体非常简单，只需在需要的地方设置`font-family`属性即可。例如： ```html 优设标题', sans-serif;">这里是使用特殊字体的文字 ``` 确保在`font-family`中列出一个备选字体，以防用户设备不...
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
在vue中更换字体,本地存储字体非引用在线字体库的方法
10-17
如果你只想在特定组件中使用新字体，可以在该组件的样式表中设置`font-family`属性。 总结一下，要在Vue中更换字体并本地存储字体文件，你需要： 1. 下载字体文件并放置于项目目录。 2. 在`main.js`中导入字体文件...
在vue项目中使用第三方的字体图标库
刘慧丽的博客
11-26 1391
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1、打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 2、选择自己需要的字体图标，下面做演示 ...
vue中引入第三方字体文件的方法示例
12-11
在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接，进行字体下载 2.将字体文件引入 自己定义一个文件夹，放入下载好的.ttf文件 先自己定义一个font.css文件，将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal;
Vue2.x中利用@font-size引入字体图标报错的解决方法
12-04
利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置 有人这里会有重复的字体文件的配置，删除一项即可 出现的问题：引入字体图标出现问题 1.报错 将字体引入的相对路径改成绝对路径 相对路径 绝对路径 2.不报错，但是出现的字体图标是小方框 有警告信息： 小方块： 报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文件 ③将font文件夹移动到static文件夹中，利用绝对路径访问，此时可以使用.sty
vue2 vue3 中使用字体文件
Ll307748784的博客
08-15 473
第三步在main.js 引入字体文件包。第一步先创建 font 文件。第二步进行引入注册字体文件。
vue中引入第三方字体
u014713031的博客
03-16 1503
  在实际开发中，默认字体无法满足我们的需求，这时候就需要依赖第三方字体库，这里推荐一个我使用的字体库：fonts2U。 1、下载一个字体包，一般包含如下文件 多种格式的文件是为了适配不同浏览器环境 2、配置stylesheet文件，一般下载下来的已经配置好了，自己如果有特殊需要可以修改 @font-face { font-family: "Curvic"; src: url("...
vue如何使用第三方字体
babywenever的博客
08-29 478
阿里的是免费的，但是字体比较少。在src/assets/fonts中添加woff文件，新建fonts.css文件，引入字体。这里的font-family是自定义的字体名字，在css中可以直接使用。在main.js中引入fonts.css。
vue2项目如何规范整个项目的字体
weixin_53416771的博客
12-23 561
在src/styles下新建一个font.scss文件，可以区分开发环境和生产环境写两个文件，然后里面定义不同的字体、不同的字体相关属性可以定义一个公共路径的变量来简化url的书写还可以新建一些混入，写好一些字体的样式还可以在src/styles/font.scss里面新建一些文本工具类使用场景：当文本内容超出容器宽度时显示省略号，比如：stylewidth200px
vue引入下载的字体
qq_63026743的博客
05-18 432
1.在assets下新建fontStyle文件夹。4.在main.js中引入index.css。3.新建index.css文件，添加。5.使用自己起的名字即可。2.将下载的字体导入。自己起自己熟悉的名字。
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值