vue 中使用自定义字体

夏天的风抚过耳膜

2022-09-23 822 阅读1分钟

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

二、在同级目录下新建一个 `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'

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