VUE项目引入字体

前言

在项目中，往往需要引入外部字体，使得页面更好看一些

一、引入外部字体

在src文件夹的assets文件夹下新建font文件夹，用于存放下载到的ttf以及eot等格式的字体文件（也可以根据个人习惯把字体文件存放在其他文件夹里面）。

font1.png

二、新建css文件

在style文件夹下新建font.css文件，文件用于声明引入的字体，定义字体名称。

font2.png

引用字体的地址为刚刚存放字体文件的地址，font-family的值可以为自定义为其他的名称，这里定义成什么，后面使用时就写成什么字体。

@font-face {
  font-family: 'SourceHanSansCN-Regular';
  src: url('../font/SourceHanSansCN-Regular.eot');
  src:
          url('../font/SourceHanSansCN-Regular.eot?#font-spider') format('embedded-opentype'),
          url('../font/SourceHanSansCN-Regular.woff') format('woff'),
          url('../font/SourceHanSansCN-Regular.ttf') format('truetype'),
          url('../font/SourceHanSansCN-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

三、全局引用font.css文件

在main.js里面引用font.css，这样，所有的文件都可以使用引入的字体了。

font3.png

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