css3之@font-face引入自定义字体

原创，禁止转载！！！

有时候我们做项目的过程中往往需要自定义字体，这里我说2种方法。

第一种，也是项目中常用的。

先新建一个font文件，将下载的字体文件放入静态资源文件夹。

然后在全局css文件中定义。如果是项目中使用，只要你全局css起作用也可以直接使用。

另外提一点，下载的文件体积过大需要压缩才能使用；

// 全局css
@font-face{
  font-family: 'PingFang';
  src: url('../font/PingFang.eot');
  src: 
    url('../font/PingFang.svg')  format('svg'),
    url('../font/PingFang.woff') format('woff'),
    url('../font/pingfang.ttf') format('truetype');
}

// 项目中
span {

  font-family: 'PingFang';    //引入的字体
  font-weight: 300;
  color: rgba(24, 24, 24, 1);
  line-height: px2rem(22px);
  ...
}

第二种，在线引入。

打开有字库， 点击字体列表，这时需要注册账号，那你就注册一个账号，找到自己想要的字体，点击立即使用。

 

然后选择css模式，把你要改变的文字放入输入框，点击生成。会出现两种方式引入，按照提示去做即可。

 

特点：第一种方式适合全局字体样式修改，第二种只适合部分字体样式修改.

如果对你有用的话，记得点个赞哦?