Vue中引入外部字体

已于 2023-11-16 10:07:09 修改
阅读量1w 收藏 64
点赞数 13
分类专栏： 前端 vue css 文章标签： vue.js css
于 2022-05-31 20:49:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51431448/article/details/125072682
版权
前端 同时被 3 个专栏收录
108 篇文章 3 订阅 ¥29.90 ¥99.00
订阅专栏 超级会员免费看
vue
78 篇文章 1 订阅 ¥29.90 ¥99.00
订阅专栏 超级会员免费看
css
4 篇文章 1 订阅
订阅专栏
本文介绍了如何从免费网站DaFont.com获取并引入外部字体到项目中，包括下载字体包、创建font.css文件进行统一引入、在main.js中全局导入以及在模板和样式中应用字体。通过这种方法，可以丰富网页的视觉效果，而无需购买付费字体。
摘要由CSDN通过智能技术生成

使用外部字体首先得有外部字体的包，要得到外部字体的包，无外乎两种途径，一种到付费网站去购买，另一种就是到免费网站下载字体包。收费的傻事我们能做？所以这里给大家上一个免费网址：DaFont.com，目前我都是到这个上面去找自己所需的字体，当然应该还有其他的下载字体的地方。接下来介绍如何引入

1. 首先下载外部字体包

进到上面网址，找到自己需要的字体，然后DownLoad

2. 在src/assets/下新建font文件夹 ，将下载的字体包放入 

3. font下新建font.css，将字体包统一引入   

@font-face {
  font-f
了解本专栏 订阅专栏 解锁全文 超级会员免费看
会说法语的猪
关注
  • 13
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
如何在vue中引入字体
Orange71234的博客
06-21 7593
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css。4.在main.js中引入刚才创建的css文件。3.font.css写入如下代码。5.在页面中使用字体。
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项目中使用自定义字体的操作步骤
云加速
07-07 268
（如果需要）：如果你的Vue项目使用的是Webpack作为构建工具，你可能需要配置Webpack来正确处理字体文件。：如果你的字体文件存储在CDN或外部服务器上，确保服务器配置了适当的CORS（跨源资源共享）策略，以允许你的Vue应用加载字体文件。：在浏览器中打开你的Vue应用，检查是否正确加载并使用了自定义字体。：考虑使用字体子集化和加载策略，比如仅加载用户需要的字符集，或者使用。：将字体文件复制到你的Vue项目中。：首先，你需要拥有你想要使用的字体的文件。：在你的Vue组件中，你可以使用。
Vue 引入外部字体
wangatong的博客
10-11 704
字体
Vue项目中引入外部字体文件
蓝胖子的博客
04-03 1368
Vue项目中引入外部字体文件
vue中引入字体
weixin_40856652的博客
06-30 8863
vue中引入字体
vue引入外部字体文件
sinat_37984999的博客
06-01 280
第一步下载字体文件，并将文件放入static文件夹中
vue中引入字体包
m0_58565372的博客
08-02 5537
1.创建文件夹 存放字体 在src目录下创建text文件夹 ，字体放在这个文件夹下,命名为字体名（英文更好），并且创建text.scss。有时候UI上面会有一些特殊字体，这时候，你就可以将UI给你的字体包引入到自己的项目中，去实现特殊字体的处理。2.在text.scss里面写入。3.在main.js中引入。4.直接在自己需要的页面使用。以上步骤就可以实现引入字体包。...
vue引用外部字体
weixin_35756690的博客
01-04 355
在 Vue 项目中引入外部字体非常简单。 首先，你需要下载你想要使用的字体文件。然后，将这些字体文件放在你的项目中的某个文件夹中，比如 assets 文件夹。 接着，在你的 CSS 文件中(比如 style.css)添加如下代码： @font-face { font-family: 'yourfontname'; src: url('./assets/yourfontname.ttf') ...
Vue项目中引入外部文件的方法（css、js、less）
10-19
在Vue项目中，正确地引入外部文件如css、js和less是构建高效可维护项目的基础。本文将详细探讨如何在Vue项目中引入这三种类型的外部文件。 首先，我们来讨论引入css文件。通常，外部css文件可以帮助我们进行样式...
vue如何使用外部特殊字体的操作
10-15
在Vue.js应用中，引入和使用外部特殊字体是一项常见的需求，尤其当设计师为项目提供了定制化的字体时。本文将详细讲解在Vue项目中如何操作，以便让这些特殊字体正确显示。 首先，你需要从网络上或者设计资源网站...
vue项目中引入外部字体（超详细）
weixin_42088314的博客
11-10 4226
1、创建一个conmon文件夹，再在其下创建一个fonts文件夹，用于存放字体文件，此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例，“FZQKBYSJW.ttf”为所下载的字体文件。 2、再在fonts文件夹下创建一个"font.css"文件，并写入样式（如下图）。 @font-face { font-family: "fzqkbysjt"; src: url('FZQKBYSJW.ttf') format('truetype'); font-weight: normal; f
vue引入外部字体
xfmuchengxue的博客
07-15 1735
1、转换格式 将字体文件.otf格式 通过https://www.fontke.com/tool/convfont/压缩并转换为下图这几种格式 2.创建一个font.css引入转换后的文件 @font-face { font-family: 'SourceHanSansBold'; src: url('./bold/SourceHanSansCN-Bold.eot'); ...
vue 引入外部字体
ZhouHuiCSDN
06-15 195
引入外部字体
vue项目引入外部字体
qq_35971976的博客
07-14 1535
4.在main.js中引入font.css文件
【vue】Vue项目中引入外部字体文件
最新发布
galaxyJING的博客
08-30 446
然后main里面引入一下。新建一个css引入字体。
vue 项目引入 字体文件
macangyewangs的博客
04-11 402
亲测无误，不会报错 第一步 第二步 /* 引入字体 */ @font-face { font-family: 'FZCHYJW'; src: url('FZCHYJW.ttf'); font-weight: normal; font-style: normal; } @import "./font.css"; 使用 font-family: 'FZCHYJW'; 效果图 ...
uniapp引入字体
09-15
在uni-app中引入字体的过程相对简单。你可以使用阿里图标库或者其他的字体库来获取你需要的字体文件。一般来说，你需要下载字体文件并将其放置在你的项目中的某个文件夹中。 然后，在你的uni-app项目中，你可以在需要使用字体的页面或者组件的样式中引入该字体。你可以使用@font-face规则将字体文件引入到样式中。在样式文件中，你可以使用以下代码引入字体： @font-face { font-family: "YourFontName"; src: url("../path/to/your/fontfile.ttf") format("truetype"); } 在上述代码中，"YourFontName"是你给字体起的名字，可以随意取。"../path/to/your/fontfile.ttf"是你字体文件的相对路径，根据你放置字体文件的位置进行相应调整。 接下来，在需要使用字体的地方，你可以使用font-family属性指定你引入的字体名字。例如： .my-icon { font-family: "YourFontName"; } 这样，你就可以在uni-app中使用你引入的字体了。记得要在需要使用字体的页面或组件中引入相应的样式文件。 希望以上信息对你有帮助！
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

会说法语的猪

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

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

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

打赏作者

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

抵扣说明：

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

余额充值