Vue项目引入自定义字体

1. 问设计先要到字体文件（woff2|eot|ttf|otf）

因为项目对浏览器支持性要求不高，所以笔者只用了ttf文件（仅以苹方字体举例），一般情况ttf和woff就够用
注：如果要求支持Opera浏览器，就洗脑产品吧，让他放弃
字体文件的支持性可以去查Can i use

2. 开始进行配置

项目使用vue cli搭建，所以是修改 vue.config.js 文件

module.exports = {chainWebpack: (config) => {……config.module.rule("fonts").test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i).use("url-loader").loader("url-loader").options({limit: 4096,fallback: {loader: "file-loader",options: {name: `/assets/fonts/[name].[ext]`}}})……}
}

在项目 src/assets/fonts 文件夹下创建 font.less（项目使用的less，视具体情况创建文件）
在同文件夹下，放入 PingFang Medium.ttf
注：文件名注意下，包括空格啥的。别问，问就是我踩了坑

@font-face {font-family: 'PingFang-RE';src: url('./PingFang\ Medium.ttf');font-weight: normal;font-style: normal;
}

修改全局 css 的 font-family

@import './assets/fonts/font.less';
#app {font-family: 'PingFang-RE';font-display: swap;
}

这里需要注意一个小的优化点，一般情况下系统会在未下载完自定义字体的情况下先隐藏页面文本。
以前的方法是使用js脚本判断字体文件下载完成以后再添加css进行字体替换。

但是现在，有了 font-display 这个css属性，就可以达到我们的预期。
这里面用到的 swap 主要是为了能在自定义字体下载前先使用系统默认字体展示我们的页面，等自定义字体下载完成再替换。

具体关于 font-display 可以参考字体预加载

Vue项目引入自定义字体相关推荐

Vue项目引入自定义字体 tinymce自定义字体的使用
字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题.我遇到的是Vue项目的 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue项目引入外部字体文件
1.在根目录的assets中新建fonts目录 /* // 注意:font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字 */ @font-face {font-fami ...
vue3项目引入自定义字体
下载字体文件创建文件夹引入otf等文件创建css文件 css文件中要使用的组件中引入该css文件即可
vue项目引入新字体
1.把字体库放在文件中在这里插入图片描述 2.新建字样式文件文件写入: @font-face {font-family: DS-Digital; //字体名称可随意指定src: url('~@/ ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录: 1. 如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot.svg.woff.woff2,这里提供一个网站Font ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...

Vue项目引入自定义字体

1. 问设计先要到字体文件（woff2|eot|ttf|otf）

2. 开始进行配置

Vue项目引入自定义字体相关推荐

最新文章

热门文章