「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战」
前言
原来打算在春节期间薅一波掘金的更文挑战羊毛,准备了3篇文章计划冲一下更文时间第一的福利的,但是最终还是没有成功。原因不是忘记了加更文挑战活动链接,就是在等时间的过程中不小心就点到发布按钮,又或者是去打麻将忘记了更文,导致3篇文章都没有薅到羊毛。今天是上班第一天,状态还没有找回,那就摸鱼写一篇文章再冲一冲这个福利,毕竟新年礼盒还是挺香的。
今天打算来说一下如何在Vue
和React
项目中引入外部字体并实现UI设计稿效果。
需求背景
需求其实很简单:就是根据UI选取的字体引入项目并使用,实现设计图效果。
看图就知道:label是使用的方正仿宋
,英文使用的是Open Sans Condensed Light
,其实在我们的页面使用了三种字体,只是由于不能截全部图,所以不能体现,页面常规字体使用的就是微软雅黑
。
需求就是如此,一句话就是在项目中如何引入外部字体并使用。
开发
注意
在前端开发中,不免遇到会有需要更换字体的需求,这时我们先要给需求方讲清楚更换字体一定要考虑到版权问题,要找有明确说明是免费使用的授权文档,不然一不小心就会成为背锅侠,这可百口莫辩了。我们UI选取的两个字体都是他去找了相关的授权使用书,证明是免费商业可用,我们才给他使用的,没有授权书我们可不能稀里糊涂的更换字体,这个一定要注意,谨记!
下载字体
既然版权的问题UI解决了,那我们就不能再去推脱了。那如何在项目中引入外部字体并使用呢?其实很简单,不管项目是Vue
还是React
,都是一样的,具体做法参考如下:
下载字体最好交给UI去做,因为样式效果是他设计的,自然字体文件也因由他解决,最好使用UI下载好的字体文件,我们只需要告诉UI我们需要.ttf
或.otf
的字体文件即可,至于其它琐事就麻烦他给你解决完善。如果你非要自己去下载字体文件,那推荐你使用下载字体-http://xiazaiziti.com/网站查找字体并下载。
使用
当所有问题都完美解决之后,就轮到我们出手了。
1、首先我们在assets
文件夹中创建fonts
文件夹,将下载好的字体放入fonts
文件夹中:
2、在assets
文件夹中创建style
文件夹(我们把重置网页样式,覆盖样式或通用样式都放在style
文件夹下),新建一个font.less
文件:
3、在font.less
文件中写入如下代码:
@font-face
{
font-family: 'openSans';
src: url('../fonts/OpenSansCondensed-Light.ttf');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'fzfs';
src: url('../fonts/FZFSJW.ttf');
font-weight: normal;
font-style: normal;
}
4、然后在main.js
(Vue)或index.tsx
(React)中引入:
import './assets/style/font.less';
5、样式使用:
.bit-th-cn {
font-size: 14px;
font-family: 'fzfs';
color: #555;
}
.bit-th-en {
font-family: 'openSans';
color: #555;
}
好了,这里就把如何在项目引入外部字体并使用的方法和需要注意的点说完了,其实实现过程很简单,就只需要按照上述步骤一步步来就能完美搞定,所以若以后遇见这样的需求dunk不必紧张,很简单的。
这是2022开工的第一篇文章,年前参与的2022首次参加更文挑战活动还是陆陆续续写了有10篇文章,算是给2022的更文开了一个好头吧,希望后续自己能坚持下来,继续把项目中遇到的更多问题分享出来,让大家一起共勉,加油💪👏。
往期精彩文章
- 如何在React项目中使用高德地图插件并封装弹窗组件呢?
- 数据可视化-如何在React项目中使用Echarts插件并封装图表组件?
- 快来看看我是如何更改Antd中DatePicker周选择器默认设置的?
- 如何封装Vue水印组件和 React中如何使用水印组件?
- 最强富文本编辑器?TinyMCE系列文章【3】
- 最强富文本编辑器?TinyMCE系列文章【2】
- 最强富文本编辑器?TinyMCE系列文章【1】
- 在React项目中实现仿饿了么Checkbox多选按钮样式的效果组件
- 2022第一次更文:前端项目实战中的3种Progress进度条效果
- 2022年前端技术趋势:你不进来看看,怎么赚它一个小目标?
- 假如古代有程序员写总结,大概就是这样吧 | 2021年终总结
后语
伙伴们,如果觉得本文对你有些许帮助,点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分,欢迎大家在评论区评论指出,我们一起讨论共勉。