vue 中使用自定义字体

822 阅读1分钟

一、先下载字体,放到 根目录assets 中的 font文件夹下,如

image.png

二、在同级目录下新建一个 font.css文件, font.css 里写入如下

@font-face {

  font-family: 'Roboto'; 

  src: url('./Roboto/Roboto-Medium.ttf') format('truetype');

  font-weight: 500;
  font-style: normal;

}
@font-face {
  font-family: "自定义字体名称";
  src: url('./自定义字体文件名称.ttf') format('truetype');
}

三、在 main.js 中 引入 font.css

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

四、然后在想用的地方直接用就行啦

image.png