一站式总结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提高当前定义元素属性的权限。
效果展示
未使用自定义字体样式:
使用自定义字体样式:
以上。