在vue3项目中全局引入鸿蒙字体不显示效果

最新推荐文章于 2024-05-09 13:31:25 发布
最新推荐文章于 2024-05-09 13:31:25 发布
阅读量181 收藏
点赞数 3
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52741665/article/details/137342443
版权
本文介绍了如何从官网下载字体文件，将其放置在CSS和JavaScript中正确引用的方法，强调了在main.js中引入CSS文件的重要性，而非直接在index.html中。
摘要由CSDN通过智能技术生成

1.官网下载好字体后，使用压缩包中的简体中文ttf

2.在asstes创建css文件夹和font文件夹并存放ttf文件

3.css文件中使用@font-face{   }引入文件

4.重点：在main.js中引入css文件目录，而不是在index.html中

文小白i
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue 项目引入字体图标报错、不显示等问题
10-18
今天小编就为大家分享一篇解决vue 项目引入字体图标报错、不显示等问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中引入highcharts图表的方法
10-17
以下是在Vue项目中引入Highcharts的详细步骤和相关知识点： 首先，我们需要通过npm来安装Highcharts库。在终端中运行以下命令： ```bash npm install highcharts --save ``` 这将把Highcharts添加到项目的依赖...
字体引入，不生效问题解决
waviness的博客
11-19 5538
字体引入不生效问题：vue项目中引入ttf字体，页面上并不生效引入字体方式 问题：vue项目中引入ttf字体，页面上并不生效 引入字体方式 在assets中创建font文件夹，将字体文件放到下面，并在font.scss文件中引入所有字体，再在App.vue中引入font.scss。使用相对路径报错，使用 / 不报错但是页面不生效。最后路径前面加个 ~ ，前缀改为~@/assets/font/之后生效。 ...
HTML CSS整理笔记
weixin_45602032的博客
11-30 447
——修改placeholder提示的样式： 1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号： 给定宽度(width:100px)、 超出隐藏（overflow:hidden）、 强制在同一行显示（white-space: nowrap）、 省略号（text-overflow:ellipsis） ——常见字体单位...
2024年HarmonyOS鸿蒙最全【前端寻宝之路】学习和总结CSS的字体属性设置(5)，2024教资笔试面试报名时间
最新发布
2401_84851624的博客
05-09 258
上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
解决在vue项目中webpack打包后字体不生效的问题
10-18
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 & nuxt font-family 设置不生效
weixin_45823152的博客
12-28 574
字体引入
vue中引入字体无效（记录）
H2659541076的博客
05-24 5535
vue中引入字体无效（记录）
vue-cli3.0项目中使用.ttf字体
Min_nna的博客
10-22 1109
1、下载字体 此处下载的字体为HarmonyOS_Sans_SC_Medium 2、将下载好的字体放到项目的assets下，同时新建font.css文件 3、font.css中配置字体 //多个字体可多个引入 @font-face { font-family: 'HarmonyOS_Sans_SC_Medium'; src: url('../fonts/HarmonyOS_Sans_SC_Medium.ttf'); font-weight: normal; font-style: nor
css中导入外部字体不生效的原因是什么？
高先生的猫
06-18 1万+
css中可以使用@font-face引入外部字体，使用@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。有时使用@font-face规则引入外部字体不生效是什么原因？ 出现不起作用的时候应该检查如下几个方面： 第一：路径是否正确，可以打开控制台，查看网络请求中是否有对应字体文件的请求操作 第二：IE9 + 虽然支持font-face但是只能 引用embedded 系列的字体 必须在src ：url (xxxx) 加上format('embedded-opentype')
字体图标的使用方式
weixin_52450408的博客
09-04 571
如何使用字体图标呢 首先咋们要先了解到一个东西。这个东西就是字体图标库！！！
鸿蒙应用开发-学习-第一章-CSS基础(一)
weixin_50991227的博客
12-26 1150
Tips：这个只是作者的学习笔记，仅作参考 使用场景：采集数据时的页面效果，例如：登录页面、注册页面 input标签可以根据type属性值的不同，展示不同效果 使用场景：需要输入单行文本时 type属性值：text 常用属性： placeholder：占位符，提示用户输入文本内容。 格式如下： 展现的效果就是单一文本框 1.3 input系列标签-密码框
vue 中使用自定义字体
lfalt的博客
09-06 6782
自定义字体
鸿蒙应用开发-学习-第一章-CSS布局(定位＋装饰)
weixin_50991227的博客
01-05 2365
Tips：这个只是作者的学习笔记，仅作参考目录1. 定位 1. 定位的基本介绍 1.1 标准流 1.2 浮动 1.3 定位 2. 定位的基础使用 3. 静态定位 4. 相对定位 5. 绝对定位 6. 子绝父相 案例:卡片模块的hot图标定位案例 案例:子绝父相水平居中案例 7. 固定定位 8. 元素的层级关系
鸿蒙应用开发-组件样式
m0_56255097的博客
02-20 1133
ArkTS以声明方式组合和扩展组件来描述应用程序的UI 同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑
在自己的网站中引入特殊字体
文龙刚的博客
05-11 663
【代码】在自己的网站中引入特殊字体。
鸿蒙（HarmonyOS）支持低代码开发，无需HTML知识，就可以设计复杂界面
热门推荐
一个被知识诅咒的人
07-02 9万+
鸿蒙的最新IDE支持可视化开发。几乎不需要编写一行代码，就可以设计非常复杂的界面。当然，如果要实现业务逻辑，还是需要编写代码的。所以我们把这些功能称为低代码开发，也就是说，可以让我们少编写一些代码。
vue3项目uniapp中引入vant
05-30
您好！感谢您的提问！为了在 Vue3 项目中引入 Vant UI，您需要按照以下步骤进行操作： 1. 首先，在您的项目中安装 Vant UI 库，您可以使用 npm 或 yarn 安装，如下所示： ``` npm install vant -S ``` 或 ``` yarn add vant ``` 2. 接下来，在您的 Vue3 项目中引入 Vant UI，您可以在 main.js 文件中按照以下方式进行引入： ``` import { createApp } from 'vue' import App from './App.vue' import Vant from 'vant' import 'vant/lib/index.css' const app = createApp(App) app.use(Vant) app.mount('#app') ``` 3. 然后，在您的组件中使用 Vant UI 组件，例如： ``` <template> <van-button>按钮</van-button> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'MyComponent', // ... }) </script> ``` 以上就是在 Vue3 项目中引入 Vant UI 的步骤，希望能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值