前言

在UI设计稿中，可能会有一些特殊字体，或者是一些字体图标。对于特殊字体，大多数用户本地电脑是没有安装该字体的字体包的。
为了能够让漂亮特殊的字体能展示在用户PC电脑上，我们通常需要把【字体包文件】植入项目中。它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。

一、开发中需要什么样的字体

1. 字体图标

推荐一个比较大而全的字体图标库：阿里图标库
项目中，图标当字体用，通过设置font-size 设置大小

2. 特殊字体

基础UI设计，需要引入漂亮的字体提升用户体验，例如下面这样的：
UI设计师通常会提供这样的字体文件包

二、项目中引入字体文件

1. 字体文件

它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。
将文件通常放到src/assets/font目录下：

2. css文件

新建一个font.scss（示例）：

@charset "UTF-8";
// 定义字体
@font-face {font-family: "DINAlternate-Bold";src: url('~@/assets/font/DINPro-Bold.otf');   // 注意这里的路径font-weight: normal;font-style: normal;
}

注意这里的字体文件src路径，路径错误会导致字体文件404

通常将该font.scss文件放到index.scss：

@import "../assets/font/font.scss";

全局index.scss文件配置：

  css: {loaderOptions: {sass: {prependData: `@import "@/styles/index.scss";`}}},

3. 项目使用该字体

<span class="font">测试字体</span>

.font {font-family: "DINAlternate-Bold";
}

总结

字体在UI前端开发中是常见需求，必备技能~~

vue 项目中引入字体文件的正确方式~相关推荐

vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
styl类型文件css,vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
前端项目中引入字体文件并使用
首先是下载所需的字体文件,将文件存放在自定义的静态资源目录. 然后在需要引入页面的style模块加入如下代码直接在需要的地方引用text_class样式就可以啦
vue项目中引入.xlsx文件
安装3个依赖包 $ npm install -S file-saver $ npm install -S xlsx $ npm install -D script-loader template部分 ...
如何在 vue 项目中引入 html 文件
这里以 vue-cli3 为例子,在pubilc目录下引入html就行了如果需要查看的可用下面的方法 1 window.open(`/ssh-terminal-template/index.html ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...

vue 项目中引入字体文件的正确方式~

文章目录

前言