[css]：css中不支持的字体，如“Barlow Semi Condensed SemiBold”，使用@font-face引入外部字体

在开发中我们经常遇到设计师做的UI图，字体千奇百怪，直接用css的font-family不能识别，这个时候就用到了@font-face这个属性了。

首先在网上下载（网上到处都是下载地址）这个字体文件放到项目目录中，

@font-face {
  font-family: 'BarlowSemiCondensedSemiBold';
  src:url("../assets/fonts/BarlowSemiCondensed-SemiBold.woff.ttf");//字体文件的目录
}

 

如，此时class="myfirst"需要用到这个字体

只需要在css中写入以下即可使用这个字体

.myfirst{
    font-family: 'BarlowSemiCondensedSemiBold';
}