(vue)vue项目中引入外部字体

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

(vue)vue项目中引入外部字体

效果：
在这里插入图片描述

第一步 放置字体包，在assets下创建一个fonts文件夹，放入下载的字体文件

在这里插入图片描述

第二步 创建一个font.css文件用于定义这个字体包的名字在这里插入图片描述

第三步 在App.vue的css中将这个css文件引入

在这里插入图片描述

第四步 页面使用

font-family: DingTalk;

解决参考：https://blog.csdn.net/weixin_52630329/article/details/130069185

nyf_unknown
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、可在body中设置字体 body{ font-family: FZCYJ; } 以上这篇vue项目引入字
vue如何使用外部特殊字体的操作
10-15
在Vue.js应用中，引入和使用外部特殊字体是一项常见的需求，尤其当设计师为项目提供了定制化的字体时。本文将详细讲解在Vue项目中如何操作，以便让这些特殊字体正确显示。 首先，你需要从网络上或者设计资源网站...
vue项目使用外部字体
weixin_44801790的博客
07-06 2143
vue项目中使用外部字体，包括LED字体、图片字体等
vue项目中引入字体
qq_39598092的博客
06-26 1161
1：首先在assets文件夹中创建一个fonts文件里面放上你想加的字体文件（类似FZBWKSJW.ttf格式）； 2：在css文件中创建一个font.css中写入 @font-face { font-family: 'my-font2'; src: url('../fonts/FZBWKSJW.ttf'); } 3：在需要用的文件中引入 import '@/assets/cs...
vue项目使用自定义字体，不同浏览器环境使用不同字体
donghua201的博客
09-28 3888
3、在入口文件main.js中引入 4、在 Vue 项目中使用该自定义字体 使用后端提供的线上字体地址 本地字体文件一般都是几十M上百M，会让项目打包文件变得很大，建议让后端把字体文件放在服务器，使用线上字体。
Vue使用font-face自定义字体详解
最新发布
蓑笠翁
03-23 3014
包含font-face使用详解，以及vue中自定义字体详解
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vue中引入第三方字体文件的方法示例
12-11
在用vue来写一官网的时候，想引入外部字体文件，毕竟总感觉他自己的字体有点难看，在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者...
Vue项目中引入外部文件的方法（css、js、less）
12-09
这两天学习了Vue.js ，正好了解了如何引入外部文件的方法，而且很重要，所以，今天添加一点小笔记。 例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件) 步骤一：安装webpack ...
vue 本地添加字体
weixin_44870361的博客
05-08 1038
1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2.将字体文件引入 自己定义一个文件夹，放入下载好的.ttf文件 先自己定义一个font.css文件，将下载好的字体文件的路径引入 @font-face { font-family: "textxxx"; //重命名字体名称 src: url('s...
vue使用 Font 字体 .ttf 格式
zuichu_2001的博客
06-03 4110
在assets的 styles 创建俩个文件夹 一个font 和 ttf 字体.ttf 就放在ttf里面 在font 文件夹里创建 log.css @font-face { font-family: "pmzd";//自定义字体名称 src: url('../ttf/书体名.ttf') format('truetype'); font-weight: normal; font-style: normal; } 在 main.js 引入import './assets/
一站式总结Vue项目中如何自定义文字样式
m0_48978227的博客
03-19 2224
在做数字化大屏的时候，数字展示如果用默认的字体影响整体的观感。所以最好要用有科技感的数字展示。纵观系统自带的字体包，都符合不了预期的效果。只能从现有的网站资源下载字体包，进行引用，然后用到对应想要改变的字体中。此总结可用于Vue中所有想要改变字体样式的情况。在对应想要改变的字体样式中使用刚刚在@font-face规则中定义好的引用名称。important;注意：如果当前根元素font-family样式元素权重很大，则需要加!important提高当前定义元素属性的权限。
vue中引入字体包
m0_58565372的博客
08-02 5521
1.创建文件夹 存放字体 在src目录下创建text文件夹 ，字体放在这个文件夹下,命名为字体名（英文更好），并且创建text.scss。有时候UI上面会有一些特殊字体，这时候，你就可以将UI给你的字体包引入到自己的项目中，去实现特殊字体的处理。2.在text.scss里面写入。3.在main.js中引入。4.直接在自己需要的页面使用。以上步骤就可以实现引入字体包。...
vue项目中引入字体包
木木木华的博客
02-22 1952
vue项目中引入字体包
vue项目使用线上字体包
weixin_60885570的博客
12-05 370
4.项目中(我是单独的某个页面使用,如果全局使用,在mains挂载即可)开发项目中,因为对配置项要求高.因此字体包没有放在本地,使用的线上路径。想本地开发我们会在项目中的assets中放入.ttf字体包文件,在线上使用,我们要和后端配合好,对字体包放在后端库里。2.创建fontConfig.css文件,3.在项目的public中在放入字体包文件。1.assrts中放入字体包.ttf。
vue中引入外部字体包
weixin_65767506的博客
02-23 312
在font.css文件中,font-family为自定义字体名字方便引入的时候使用,scr为引入字体包的名称。ttf一般为字体包,在src下新建 common 文件夹,把字体包放进来。3.在需要使用的地方先引入再使用。
vue全局自定义字体，提高项目字体美化
在写作的路上持续输出。
03-09 4628
📢: 我们在项目开发时.或多或少 会给项目 添加全局字体; 添加字体的最佳方案,请看 👇 👇 👇 四步直接搞定
vue项目中如何添加UI给的字体包
m0_66675766的博客
04-11 1098
在src目录下创建一个assets文件夹用于存放我们的一些样式文件，然后再当前目录下再创建一个fonts文件夹用于存放UI给的字体包：如下所示。在很多项目中我们会使用到UI给我们的特定字体，那我们在项目中如何使用呢？在man.js中引入刚刚写好的public.css。然后再vue页面中就能直接使用了。
Vue · font引入外部字体
weixin_42091247的博客
10-20 718
方法一： 1、下载所需要的字体，.ttf格式（测试字体） 2、 src下新建css文件，文件夹中包含以下文件 font.css @font-face { font-family: 'Gen2'; src: url('./GenJyuuGothicMonospaceHeavy2.ttf') format('truetype'); font-weight: normal; font-style: normal; font-size: 18px; } 3、引入字
在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、付费专栏及课程。

余额充值