一、为什么引入字体
对于大部分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);
});
这样可以避免默认情况下浏览器会对所有字体进行预加载，从而降低页面的加载速度。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188396.html
