Vue或uniapp引入自定义字体

一、为什么引入字体

对于大部分APP或网站而言,字体是很重要的一部分。在前端开发中,选用合适的字体往往会极大地提升网站的视觉体验。然而,网页中默认字体的种类和风格有限,且在不同的设备、浏览器上渲染效果不尽相同。因此,很多开发者会选择自定义字体来提升用户体验。

二、如何引入字体并使用

vue引入字体有多种方法,下面将介绍其中两种较为常见的方式。

1. 使用@font-face

下载需要的字体到本地文件夹中

在vue项目下的src/assets文件夹下创建fonts文件夹,放入需要用的字体

在uniapp项目下创建fonts目录,放入需要用的字体

复制代码
// 在css文件中定义字体
@font-face {
  font-family: 'CustomFont';
  src: url('@/fonts/custom-font.ttf');
}

body {
  font-family: 'CustomFont';
}

view {
  font-family: 'CustomFont';
}

这种方式相对简单,定义了一个自定义字体,然后直接在需要应用字体的地方引入即可。需要注意的是,在font-face中除了src属性,还应该添加font-family属性,用来说明自定义字体的名称。通过在css中的font-family设置,即可随时使用。

2. 动态引入字体

也可以在运行时动态引入字体,可以使用以下代码:

复制代码
const fontFace = new FontFace('CustomFont', 'url(./fonts/custom-font.ttf)');
fontFace.load().then(() => {
  document.fonts.add(fontFace);
}).catch((error) => {
  console.error(error);
});

这样可以避免默认情况下浏览器会对所有字体进行预加载,从而降低页面的加载速度。

相关推荐
脑袋大大的10 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0120 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui