vue项目中引入外部字体（超详细）

最新推荐文章于 2024-09-20 11:01:49 发布
最新推荐文章于 2024-09-20 11:01:49 发布
阅读量4.2k 收藏 21
点赞数 2
分类专栏： vue.js CSS 文章标签： css vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42088314/article/details/109606688
版权
本文详述了在Vue项目中如何引入外部字体。首先，创建common/fonts文件夹存储字体文件，例如‘FZQKBYSJW.ttf’。然后，在fonts文件夹下创建font.css，设置样式。最后，在main.js中引入font.css，即可在项目中使用自定义字体。
摘要由CSDN通过智能技术生成

1、创建一个conmon文件夹，再在其下创建一个fonts文件夹，用于存放字体文件，此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例，“FZQKBYSJW.ttf”为所下载的字体文件。

2、再在fonts文件夹下创建一个"font.css"文件，并写入样式（如下图）。在这里插入图片描述

在这里插入图片描述

@font-face {
   
  font-family: "fzqkbysjt";
  src
最低0.47元/天 解锁文章
如光不息丶
关注
专栏目录
Vue项目中引入外部文件的方法（css、js、less）
10-19
在Vue项目中，正确地引入外部文件如css、js和less是构建高效可维护项目的基础。本文将详细探讨如何在Vue项目中引入这三种类型的外部文件。 首先，我们来讨论引入css文件。通常，外部css文件可以帮助我们进行样式...
vue项目里面引入字体包
nian_10的博客
02-19 2288
项目中引入字体包的引入和定义. 看完这篇文章你成功get
如何在vue中引入字体
Orange71234的博客
06-21 7734
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
vue项目引入比较独特的字体的方法
weixin_47389477的博客
09-20 568
.ttf格式的字体文件在vue项目中的使用
vue中怎么引入字体包（超详细）
前端学习笔记
05-24 1万+
vue中怎么引入字体包 一、创建文件并添加字体包 1、在src里面的assets文件中创建text文件（没有assets文件可以自己创建一个，也可以不用此命名）； 2、把字体包放入text文件，并创建一个text.css文件（命名随意），把字体包引入text.css文件中，font-family建议使用英文。 text.css文件内容 @font-face { font-family: "JDZY"; src: url('./font.woff'); font-weight: no
vue引用外部字体
weixin_35756690的博客
01-04 374
在 Vue 项目中引入外部字体非常简单。 首先，你需要下载你想要使用的字体文件。然后，将这些字体文件放在你的项目中的某个文件夹中，比如 assets 文件夹。 接着，在你的 CSS 文件中(比如 style.css)添加如下代码： @font-face { font-family: 'yourfontname'; src: url('./assets/yourfontname.ttf') ...
vue中引入字体
weixin_40856652的博客
06-30 8924
vue中引入字体
vue项目引入字体样式
蓦然回首，那人却在，灯火阑珊处。
04-28 1884
vue项目引入字体样式
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vue如何使用外部特殊字体的操作
10-15
在Vue.js应用中，引入和使用外部特殊字体是一项常见的需求，尤其当设计师为项目提供了定制化的字体时。本文将详细讲解在Vue项目中如何操作，以便让这些特殊字体正确显示。 首先，你需要从网络上或者设计资源网站...
Vue 项目导入字体文件
weixin_42754922的博客
04-17 3738
要想实现UI设计师设计的原型效果，有时候需要用到一些特殊的字体，在项目中就需要导入相关的字体文件。本文章以平方字体为例。
Vue项目中引入外部字体文件
蓝胖子的博客
04-03 1513
Vue项目中引入外部字体文件
vue交互
maolian1995的博客
01-05 408
自己写的json文件，与调API差不多，不喜勿喷
vue中引入字体包
m0_58565372的博客
08-02 5563
1.创建文件夹 存放字体 在src目录下创建text文件夹 ，字体放在这个文件夹下,命名为字体名（英文更好），并且创建text.scss。有时候UI上面会有一些特殊字体，这时候，你就可以将UI给你的字体包引入到自己的项目中，去实现特殊字体的处理。2.在text.scss里面写入。3.在main.js中引入。4.直接在自己需要的页面使用。以上步骤就可以实现引入字体包。...
Vue中引入外部字体
m0_51431448的博客
05-31 1万+
简述 使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入 1. 首先下载外部字体包 进到上面网址，找到自己需要的字体，然后DownLoad 2. 在src/assets/下新建font文件夹，将字体包放入 3. font下新建font.css，将字体包...
vue项目中引入自定义字体
Y13349887034的博客
03-24 630
页面中加入特殊字体
记录项目中使用过的样式
weixin_43422861的博客
11-04 231
** vue引入外部字体** 1、下载所需要的字体，FZHZGB.ttf （方正汉真广标简体） 、FZZDHJT.ttf（方正大黑简体） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZHZGB'; //重命名字体名 src: url('FZHZGB.ttf'); //引入字体...
vue项目引入三方字体
天渺(喵)工作室
11-12 2097
vue2项目引入三方字体 注意:前提是字体文件没有问题 新建一个放字体的文件font,放入字体文件，定义一个字体font.css @font-face { font-family:"庞门正道标题体"; /*注意 每次添加 format('embedded-opentype')都会出错 我没加这个为了兼容IE9的format*/ src: url("../font/庞门正道标题体.ttf") format('truetype') ; font-wei.
全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
热门推荐
qq_25007459的专栏
10-31 2万+
1、下载所需要的字体，.ttf格式本文以（PingFang.ttf 为例） 底下将会附加苹果方体-简易黑体PINGFANG MEDIUM.tff 可自行下载其他字体样式，全局引用，方便快捷。 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...
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服务来避免这个问题。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值