Vue中引入外部字体并使用

一、下载

下载需要引入的字体包：

二、创建资源目录

创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css：

三、引入字体

在 font.css 文件中引入想要的字体：

@font-face {
	// font-family: 'XXX'; 将字体名字自定义为 XXX，使用时要用这个名字
	font-family: 'SquareSansSerif';
	src: url('./SquareSansSerif.ttf');
}

// font.css中支持设置多种字体
@font-face {
  font-family: 'DigitalThick';
  src: url('./DigitalThick.ttf');
}

四、全局引入font.css

在项目中全局引入写好的 font.css 文件：

import '@/assets/font/font.css'

以在 router.js 中引入为例：

五、使用字体样式

那么现在就可以在 vue 组件中随意使用引入的字体样式啦！

<template>
  <div class="wrap">
    <div class="myfont">你好Hello World 123456789</div>
  </div>
</template>

<style lang="scss">
.myfont{
	font-size: .4rem;
    font-family: 'SquareSansSerif';  // 这里的 SquareSansSerif 是引入时的自定义名字
}
</style>

效果：