admin管理员组文章数量:1594755
文章目录
- 前言
- 一、开发中需要什么样的字体
- 1. 字体图标
- 2. 特殊字体
- 二、项目中引入字体文件
- 1. 字体文件
- 2. css文件
- 3. 项目使用该字体
- 总结
前言
在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 项目中引入字体文件的正确方式~ 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728202246a1149534.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论