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

Asuoxi

已于 2024-03-19 13:51:45 修改

阅读量2.6k

点赞数 6

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2024-03-19 11:17:24 首次发布

本文链接：https://blog.csdn.net/m0_48978227/article/details/136834587

版权

1 篇文章

订阅专栏

简介

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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");//引用字体资源包所在项目中的相对路径
}

在这里插入图片描述

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

import './fonts/fonts.css'

在这里插入图片描述

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

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

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

在这里插入图片描述

未使用自定义字体样式：

在这里插入图片描述
使用自定义字体样式：

以上。