《VUE》怎么添加文字?添加文字 *** 作流程

《VUE》怎么添加文字?添加文字 *** 作流程,第1张

VUE在制作自己视频时,可以输入与视频应景的文字来加强视频的观赏性,这里我就来介绍一下怎么样在VUE 视频剪辑 的时候添加文字的 *** 作流程吧

添加文字的方法:

1、首先进入已完成好的拍摄页面,然后点击右上角的“表情”标志;

2、然后选择红框里的贴图才可以添加文字;

3、点击之后就可以直接输入你想要输入的文字;

3、保存之后就可以在视频上看到自己输入的文字图片了;

vue视频剪辑加字幕的方法是:

1、打开Vue,点击左下角导入视频;

2、视频导入后,点击右上角的编辑选项;

3、点击文字选项,将视频片段选中;

4、点击字幕,选择字幕样式;

5、输入文字后点击对勾,文字就添加成功了。

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品,这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室,同样也能满足3D自由艺术家。Vue的OpenGL预览引擎可以使高端GPU和多核系统的效率最大化。引擎与一个强大的多线程架构相辅相成,能够有效利用高性能显卡制作高质量视觉表现效果。Vue带有一个可用Python应用脚本跨平台标准进行编程的可扩展架构。通过Python脚本,可以使用数以百计的内部结构和函数,从而制定或自动化任务,抑或创建全新的渲染效果,生态系统函数,动画脚本和内部文件格式定制的载入/导出程序。

总结一下就是:用户借助该规则,可以为引入的字体包命一个名字,并指定在哪里可以找到它(指定字体包的存储路径)后,就可以像使用通用字体那样去使用它了。

例如现在的需求是:需要在项目中使用 KlavikaMedium-Italic 字体。

则只需以下三个步骤即可。

这里放到根目录下的 tool/fonts 文件夹里。

新建一个index.vue文件,引入样式:

效果如下:

既然在本地开发环境实现了效果,于是就使用 webpack 打包准备上线,却发现 webpack 在打包过程中报错:

我们在定义自定义字体时使用URL指定了字体包的路径,由于 webpack 默认是无法处理 css 中的 url 地址的,因此这里会报错。

这时就需要借助 loader 来大显身手了,解决这个问题需要使用 file-loader ,它主要干了两件事儿:

在 webpack.config.js 中,配置file-loader:

再次执行打包命令,不再报错。

于是将打包出来的 dist 目录重新部署到服务器上后访问页面,却发现由于找不到字体导致没有生效:

从图中可以看出,http请求字体包的路径为: 根目录下(打包出来的静态文件index.html所在目录)的 css/620db1b997cd78cd373003282ee4453f.otf

看了一下打包命令生成的 dist 目录结构:

却发现,字体包和 index.html 是在同一级。因此字体无法生效的原因就很明朗了:

可以通过修改字体包打包后的实际存储路径去解决这个问题,在 webpack.config.js 中,借助 options 参数可以继续给 file-loader 设置更多的配置项:

再次打包,生成的 dist 目录结构如下:

可以看到字体包正如配置时预期的那样存储在 **css/fonts **目录下面。

重新部署项目,再次查看:

这一次 http 请求的字体包路径与实际的存放路径一致,因此自定义字体生效。

可以通过下面这个梳理流程图看的更清楚一些:

为什么本地开发的时候可以看到字体,部署到服务器后却看不到了呢?


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11565974.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存