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);
});

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

相关推荐
阿明Drift20 小时前
从炫酷粒子星云学 Three.js:深度解析一个 15 万粒子的 GPU 动画系统
前端·three.js
凉_橙20 小时前
移动端h5适配方案
前端
久亮哦20 小时前
开发Electron程序
前端·javascript·electron
敲敲了个代码21 小时前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
你们的前端课代表21 小时前
前端如何优雅地“边聊边等”——用 Fetch 实现流式请求大模型
前端
王大宇_21 小时前
React闭包陷阱
前端·javascript
A达峰绮21 小时前
Actix-web 框架性能优化技巧深度解析
前端·性能优化·actix-web
小白学过的代码21 小时前
videojs增加视频源选择框小工具
javascript·vue.js·音视频
Promise52021 小时前
用油猴脚本实现用户身份快速切换
前端·javascript
玲玲51221 小时前
vue3组件通信:defineEmits和defineModel
前端