一站式总结Vue项目中如何自定义文字样式

简介

在做数字化大屏的时候,数字展示如果用默认的字体影响整体的观感。所以最好要用有科技感的数字展示。纵观系统自带的字体包,都符合不了预期的效果。只能从现有的网站资源下载字体包,进行引用,然后用到对应想要改变的字体中。此总结可用于Vue中所有想要改变字体样式的情况。

下载字体资源

网上有很多字体资源的网站,在下载资源的时候要注意是否为可商用字体包。我使用的是
FontSpace点击进入FontSpace官网

官网中,找到想要使用的字体样式,点击最右侧的下载按钮,即可进行下载。

在这里插入图片描述

将下载好的文件资源整合到自己的项目中

下载好的文件格式一般为 .ttf.otf 格式。

在这里插入图片描述

1. 新建字体文件夹

在自己想要改变样式的项目中,找到src文件夹,在src文件夹下创建一个新的文件夹,将其命名为 fonts

2. 字体资源包放在字体文件夹下

将刚刚下载好的 .ttf.otf 格式,放在“fonts”字体文件夹下。

在这里插入图片描述

3. 创建font.css文件

font.css 文件可以放在“src” 文件夹下,也可以直接放在刚刚建立好的 “fonts” 文件夹下。为了方便后期维护,我放在了 “fonts” 文件夹下。
在fonts.css中,使用 @font-face规则引入刚刚下载好的的字体资源包。font.css内容如下:

@font-face {
    font-family: 'screenNumber';//自定义font-family的引用名称
    src: url("../../src/fonts/Segment7-4Gml.otf");//引用字体资源包所在项目中的相对路径
}

在这里插入图片描述

4. 全局引入字体样式

在src/main.js文件中引入fonts.css文件:

import './fonts/fonts.css'

在这里插入图片描述

使用自定义字体

在对应想要改变的字体样式中使用刚刚在@font-face规则中定义好的引用名称。

font-family: 'screenNumber',sans-serif !important;

注意 :如果当前根元素font-family样式元素权重很大,则需要加 !important提高当前定义元素属性的权限。

在这里插入图片描述

效果展示

未使用自定义字体样式:

在这里插入图片描述
使用自定义字体样式:
在这里插入图片描述
以上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值