如何在css文件中使用本地ttf/woff/woff2字体？

如何在css文件中使用本地ttf/woff/woff2字体？

1、首先下载ttf、woff、woff2字体文件

免费的字体文件可以上阿里矢量图库进行下载，不过数量很少。

2、在css文件中配置相应代码

@font-face { 
  font-family: 'myFont1'; 
  src: url('./myfont1.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face { 
  font-family: 'myFont2'; 
  src: url('./myfont2.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face { 
  font-family: 'myFont3'; 
  src: url('./myfont3.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

.hello1 {
  color: red;
  font-family: 'myFont1';
}
.hello2 {
  color: blue;
  font-family: 'myFont2';
}
.hello3 {
  color: pink;
  font-family: 'myFont3';
}

3、在js或html文件中使用css中的样式

import _ from 'lodash';
import './style.css';
 
function component() {
  const element1 = document.createElement('div');
  const element2 = document.createElement('div');
  const element3 = document.createElement('div');

  // Lodash, now imported by this script
  element1.innerHTML = _.join(['Hello', 'World'], ' ');
  element1.classList.add('hello1');
  element2.innerHTML = "Hello World";
  element2.classList.add('hello2');
  element3.innerHTML = "Hello World";
  element3.classList.add('hello3');

  element1.appendChild(element2);
  element1.appendChild(element3);

  return element1;
}

document.body.appendChild(component());

4、成果

3种不一样的字体