1、在使用@Font-face设置自定义字体的时候要考虑兼容性。如果下载的字体只有一种格式,需要把其他的格式都转换出来。(关于自定义字体兼容性问题可以自己搜索)。格式最好包括 .eot .otf .svg .ttf .woff .woff2。这几种就够了。
2、如果有其中的一种格式,我们可以借助一下字体格式转换网站去转换一下。推荐使用:fontke
3、首先上传你的字体,前提是保证字体是可以用的。然后选择转换的字体,选好后点击立即转换。这个时候网站就会自动下载已经转换好的字体。
4、有了字体集之后,在css里面加上对应的字体即可。例如下面这样。(注意:相对路径要写对,不然报错。)@font-face { font-family: "经典行书简"; src: url('../../../font/经典行书简.eot') format('embedded-opentype'), url('../../../font/经典行书简.woff2') format('woff2'), url('../../../font/经典行书简.woff') format('woff'), url('../../../font/经典行书简.ttf') format('truetype'), url('../../../font/经典行书简.svg#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;}.home-row1-title{ width: 631px; height: 53px; margin: 58px auto 47px auto; display: flex; align-items: center; font-size: 51px; font-family:"经典行书简";}最后就看到字体正常显示出来了。